我正在尝试构建一个将鼠标悬停在某个元素上时出现的鼠标悬停菜单。然而,这对于底部行来说效果很好,悬停在滚动条中消失了。
HTML
<div style="width:1024px; height:50px; overflow:scroll; border: 1px solid red;">
<div class="dropdown">
<span style="margin-left:5px" class="checkboxlink ignore"></span>
<ul>
<li><a href="#"><span class="checkboxlink todo"></span>Te doen</a></li>
<li><a href="#"><span class="checkboxlink done"></span>Behandeld</a></li>
<li><a href="#"><span class="checkboxlink ignore"></span>Negeren</a></li>
<li><a href="#"><span class="checkboxlink park"></span>Parkeren</a></li>
</ul>
</div>
.... more divs
CSS
.dropdown{
position: relative;
display: inline-block;
font-size: 16px;
width: 40px;
border: 0px solid white;
vertical-align: top;
}
.dropdown:hover
{
border: 0px solid #ccc;
}
ul{
position: absolute;
list-style: none;
text-align: left;
z-index: 1;
margin:0;
padding:0;
display: none;
background-color: white;
border: 1px solid #ccc;
}
.dropdown:hover ul {
display: block;
}
另见此处:
https://jsfiddle.net/w030L59t/
我试过绝对定位,但元素仍然停留在可滚动区域。
最佳答案
问题是position: relative
下拉父项的属性。如果删除它们,您可以轻松添加 position: absolute
到您的下拉列表,将其显示在可滚动框上方:
删除问题position: relative
是每个下拉列表的位置在页面加载时计算一次。虽然下拉菜单无需滚动即可正常工作,但您会在演示中注意到,每个下拉菜单都不会刷新其位置。
这可以使用几行 javascript 来解决,计算 .offset.top
使用 top: <offset.top of its parent>
滚动和更新下拉列表位置后的每个父项.我已经添加了类 .list_item
和 ul.dropdown_list
, 尽管 ID #wrapper
.
$(document).ready(function() {
// fire function everytime the wrapper is scrolled
$('#wrapper').scroll(function(){
// set element to relate to
var list_items = $('div.list_item');
// get each position
list_items.each(function() {
// store offset().top inside var
var list_item_position = $(this).offset().top;
// select previous dropdown_list item
$(this).prev().find('ul.dropdown_list').css({
// apply offset top
top: list_item_position + "px"
});
});
// write to console to track changes
console.log('positions updated');
}); // .scroll
}); // document.ready
关于html - 允许元素出现在滚动条上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35798860/