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

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%)
}

我想在悬停在 li.projects 上时显示 .myDropDown ，当悬停在 .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

这样使用

li:hover .myDropDown{dispaly:block;}

Answer 2

为什么不只是 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>

Answer 3

您或许应该使用提供的 CSS 答案。但是如果你想使用 javascript 你应该这样做：

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

如果您希望 top:calc(15px + 100%) 重叠，则不能保留它。如果您在下拉菜单和 link 之间留有空隙，那么您将在进入之前删除它。 CSS 解决方案也是如此。

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

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

hover over two elements set effect to one element

jquery

html

css

drop-down-menu

jquery-hover