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

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

您可能应该使用提供的 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

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

这样用

li:hover .myDropDown{dispaly:block;}