悬停在两个元素设置的效果将一个元素

Question

我在我的资产净值有这个列表项，它有一个下拉菜单

<li class="projects"> 
     <a href="#">Projects</a> 
     <i class="fa fa-angle-down" aria-hidden="true"></i> 
     <ul class="list-unstyled myDropDown"> 
      <li><a href="#">King SALEH Bridge</a></li> 
      <li><a href="#">Internationl future schools</a></li> 
      <li><a href="#">Elwakeel Companies Group</a></li> 
     </ul> 
</li> 

，这里是样式

nav .myDropDown{ 
    display:none; 
    position:absolute; 
    min-height:160px; 
    background-color:#ffb700; 
    top:calc(15px + 100%) 
} 

，我想展示.myDropDown当悬停在li.projects上时，它仍然显示在悬停在.myDropDown本身上时，并且当鼠标不在li.projects或.myDropDown中时它会消失。

我有这个jQuery代码，但它不工作？！

$("nav .projects").hover(function(){ 
    $("nav .myDropDown").css("display","block"); 
}); 
$("nav .myDropDown").hover(function(){ 
      $(this).css("display","block"); 
    },function(){ 
      $(this).css("display","none"); 
}); 

Answer 1

你应该使用提供的CSS的答案。但是，如果你想使用JavaScript，你应该做这样的：

$("nav .projects").hover(function(){ 
    $(this).find(".myDropDown").css("display","block"); 
}, function(){ 
    $(this).find(".myDropDown").css("display","none"); 
}); 

你不能保持top:calc(15px + 100%)如果你想让它重叠。如果您在下拉菜单和链接之间保持一段距离，那么您在输入它之前将其移除。这与CSS解决方案一样。

https://jsfiddle.net/80tbzcjh/1/

Answer 2

用这种方式

li:hover .myDropDown{dispaly:block;} 

Answer 3

为什么不仅CSS？

ul.myDropDown{ 
 
    display: none; 
 
} 
 

 
li.projects:hover > ul.myDropDown{ 
 
    display: block; 
 
}

<li class="projects"> 
 
     <a href="#">Projects</a> 
 
     <i class="fa fa-angle-down" aria-hidden="true"></i> 
 
     <ul class="list-unstyled myDropDown"> 
 
      <li><a href="#">King SALEH Bridge</a></li> 
 
      <li><a href="#">Internationl future schools</a></li> 
 
      <li><a href="#">Elwakeel Companies Group</a></li> 
 
     </ul> 
 
</li>

编辑：我改变了你的顶值和它的作品：

li.projects { 
 
position: relative; 
 
} 
 

 
ul.myDropDown{ 
 
    display:none; 
 
    position:absolute; 
 
    min-height:160px; 
 
    background-color:#ffb700; 
 
    top: 0px; 
 
} 
 

 
li.projects:hover > ul.myDropDown{ 
 
    display: block; 
 
}

<li class="projects"> 
 
     <a href="#">Projects</a> 
 
     <i class="fa fa-angle-down" aria-hidden="true"></i> 
 
     <ul class="list-unstyled myDropDown"> 
 
      <li><a href="#">King SALEH Bridge</a></li> 
 
      <li><a href="#">Internationl future schools</a></li> 
 
      <li><a href="#">Elwakeel Companies Group</a></li> 
 
     </ul> 
 
</li>