jquery show / hide使元素在悬停时可见

时间:2015-02-18 06:24:02

标签: jquery css

我使用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> 

3 个答案:

答案 0 :(得分:3)

更改以下行

$(".menuItem").hover(function(){

到这个

$(".menuItem, .dropdown").hover(function(){

演示: http://jsfiddle.net/mvqxy9pb/1/

答案 1 :(得分: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;
}

答案 2 :(得分:0)

尝试

$(document).ready(function(){
  $(".menuItem, .dropdown").hover(function(){
   $(".dropdown").show();
  }, function(){
   $(".dropdown").hide();
  });
});

https://jsfiddle.net/mvqxy9pb/