jemand anders
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
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>