Question

我的导航中有这个列表项，它有一个dropDown菜单

 <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？

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑：我更改了您的最高价值并且有效：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

如果您希望top:calc(15px + 100%)重叠，则无法保留@Pipe({ name: 'filter', pure: false })。如果您在下拉列表和链接之间保持间隙，则在输入之前将其删除。它与CSS解决方案相同。

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

Answer 3

使用这种方式

li:hover .myDropDown{dispaly:block;}

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

3 个答案: