Hallo zusammen,
ich habe hier eine scrollable Liste mit Links bei denen die Attribute gezeigt werden wenn man drüber geht. Allerdings wenn man durch die Liste scrollt und dann über ein Element geht, dann spring das Feld weiter nach unten abhängig davon, wie weit man schon gescrollt hat.
Weiß jemand wie man das umgehen kann?
Liebe Grüße
Ingo
Unten noch ein Bild was mein Problem ist.
Anbei ein Codebeispiel:
ich habe hier eine scrollable Liste mit Links bei denen die Attribute gezeigt werden wenn man drüber geht. Allerdings wenn man durch die Liste scrollt und dann über ein Element geht, dann spring das Feld weiter nach unten abhängig davon, wie weit man schon gescrollt hat.
Weiß jemand wie man das umgehen kann?
Liebe Grüße
Ingo
Unten noch ein Bild was mein Problem ist.
Anbei ein Codebeispiel:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#myUL {
list-style-type: none;
clear:both;
text-align:left;
padding: 0px;
border: 0px;
width: 100%;
display:block;
max-height:400px;
min-height:200px;
clear:both;
overflow:hidden;
overflow-y:scroll;
}
#myUL li {
border: 0px;
margin-top: -1px; /* Prevent double borders */
background-color: #777;
text-align:left;
font-size: 16px;
padding:0px;
}
#myUL li a {
border: 0px;
margin-top: -1px; /* Prevent double borders */
background-color: #ccc;
padding:8px;
text-decoration: none;
width: 100%;
text-align:left;
color:black;
font-size: 16px;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #12BC43;
display:block;
color:black;
}
.hide2 {
display: none;
margin-left:-20px;
width: 400px;
}
#SongAttribute:hover {
color: #555;
}
#SongAttribute:hover + .hide2 {
display: block;
color: black;
float:left;
text-align: left;
padding:5px;
background-color:rgba(100, 100, 100, 0.9);
position: absolute;
margin-top:5px;
z-index:1000;
}
</style>
</head>
<body>
<ul id="myUL" >
<?php
for ($i=0;$i<50;$i++){
// use php to make 50 entries fast
echo('<li><a href = #"> <p id="SongAttribute";>Lalala</p>
<div class="hide2" >
<b style="margin-top=5px;">Attributes: </b><hr style="height:5pt; visibility:hidden;" />
<table style="width:100%;"><tr>
<td>Number: </td><td>5</td><tr><td> Path: </td><td> var/www/html/ </td><tr><td> Playlist:</td><td> Best</td>
</table>
</div>
</a></li>');
}
?>
</ul>
</body>
</html>Anhänge
Zuletzt bearbeitet:
