我创建了一个简单的功能,使用jquery在悬停锚点时显示和隐藏div。但是,一旦我离开锚标记,div就会消失。我无法浏览div。我应该能够停留在div元素上。请任何人帮忙。
这是小提琴
http://jsfiddle.net/mvqxy9pb/
<style>
.container {
width: 200px;
position: relative;
display: inline-block;
}
.dropdown{
position:absolute;
left:0px;
width:250px;
top:18px;
background-color:#c03;
height:100px;
display:none;
}
</style>
<script>
$(document).ready(function(){
$(".menuItem").hover(function(){
$(".dropdown").show();
}, function(){
$(".dropdown").hide();
});
});
</script>
<div class="container">
<div class="wrap">
<a href="#" class="menuItem">Menu Item</a>
<div class="dropdown">
asasasasa
</div>
</div>
</div>
更改下线
$(".menuItem").hover(function(){
到这个
$(".menuItem, .dropdown").hover(function(){
演示:http://jsfiddle.net/mvqxy9pb/1/
您也可以尝试使用css而不是jquery
http://jsfiddle.net/mvqxy9pb/3/
我已经添加了menuItem作为(锚点和下拉菜单)的主要div
<div class="menuItem">
<a href="#">Menu Item</a>
<div class="dropdown">
asasasasa
</div>
</div>
我去掉了这个位置:相对;从容器添加到menuItem,然后添加到menuItem:hover添加display:block;用于显示下拉列表。
.menuItem:hover .dropdown {
display:block !important;
}
尝试
$(document).ready(function(){
$(".menuItem, .dropdown").hover(function(){
$(".dropdown").show();
}, function(){
$(".dropdown").hide();
});
});
https://jsfiddle.net/mvqxy9pb/