Popup erscheint nicht immer

phwert

Erfahrenes Mitglied
Hallo,

wenn man den File im Browser aufruft und in der Waagerechten im Bereich Ende erstes Drittel mit der Maus senkrecht von oben nach unten geht, wird pro Satz ein Popup angezeigt. Kommt man in den Bereich, wo das Popup erscheint (position:fixed) ist das nicht (immer) der Fall.
Weiß jemand, woran das liegt, und wie man das Problem beseitigt?

Grüße

HTML:
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tutorials-asdf</title>
    <style>
        .popup {
            display: none;
            position: fixed;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.25);
            padding: 3px;
        }
        
        .wrapper {
            background-color: rgba(255, 255, 255, 0.85);
            height: 100%;
            z-index: 11;
            padding: 10px;
        }
        
        #AllPostsWrapper li a:hover~.popup {
            display: block;
        }
    </style>
</head>

<body>

    <div id="AllPostsWrapper">
        <ol id="ol">
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf </div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf </div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf </div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf </div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf </div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf </div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf </div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</div>
                </div>
            </li>
            <li><a href="https://myDomain.com/asdf.html">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf</a>
                <div class="popup">
                    <div class="wrapper">asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asd fasdf </div>
                </div>
            </li>
        </ol>
    </div>

</body>

</html>
 

basti1012

Erfahrenes Mitglied
So ganz verstehe ich nicht was du meinst.
Wenn du dein Pop-up CSS so änderst, ist das Problem dann noch da?
Code:
        .popup {
            display: none;
            position: fixed;
            bottom: 10%;
            left: 10%;
            width: 80%;
            height: 10%;
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.25);
            padding: 3px;
        }
Ich kann mir vorstellen das dein Pop-up beim hovern des nächstes Element im Weg ist , weil du so nicht durch den Pop-up hovern kannst.( außer pointer-events:none; )
 

phwert

Erfahrenes Mitglied
Ich kann mir vorstellen das dein Pop-up beim hovern des nächstes Element im Weg ist , weil du so nicht durch den Pop-up hovern kannst.
Genau das scheint das Problem zu sein.
Mit visibility (hidden, visible) statt display (none, block) geht es ein wenig besser, aber im Bereich des Popup flackert es mächtig.
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Basti hat die Lösung doch schon angedeutet: pointer-events: none; für das Popup, dann wird es durchlässig für Mausaktionen einschl. Hover.