Question

我的导航栏上有一个下拉列表。

<ul class="topbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="services.php" class="fixed_hover">Services</a>
   <ul class="drop_down">
      <li><a href="#">lorem</a></li>
      <li><a href="#">lorem</a></li>
   </ul>
</li>
<li><a href="contact.php">Contact</a></li>
 </ul>

我只是把css用于“topbar-nav li”的悬停状态

ul.topbar-nav a.selected, ul.topbar-nav a:hover{
    color:#000;
    background:url(img/nav_hove.png) no-repeat;
    margin:0;
    padding-top:2px;
    }

以下是slideDown / up下拉菜单的jq代码。（我从教程中得到了这段代码）

function mainmenu(){
$(" .topbar-nav ul ").css({display: "none"});
$(" .topbar-nav li ").hover(function(){
    $(this)
      .find('ul:first:hidden')
      .css({visibility: "visible",display: "none"})
      .slideDown(400);

    },function(){
        $(this)
          .find('ul:first')
          .slideUp(400);
    });
}
$(document).ready(function(){
    mainmenu();
});

现在，一切都很完美，但是当你将鼠标悬停在下拉菜单项上时，我想要css悬停规则（将nav_hove.png背景分配给ul.topbar-nav li），我不能用css来做，所以我决定自己在jquery上尝试一下，除了当我再次悬停在“服务”选项卡上时，没有任何背景会出现。这是我的杂乱代码：

$(function fixed_hover(){
   $("ul.drop_down li").hover(function fixed_hover(){
            $(".fixed_hover").css('background', 'url(img/nav_hove.png) no-repeat');
        }
    );
});
$(function fixed_hover2(){
      $("ul.drop_down li").mouseleave(function fixed_hover2(){
            $(".fixed_hover").css('background', 'none');
        }
    );
});

我会感激任何帮助，我会提前感谢你们这么做。如果您需要更多关于它的信息，请告诉我，但我希望我能说清楚。

Answer 1

在第二个函数中，尝试将属性设置为空值而不是空，如下所示：

$(".fixed_hover").css('background', '');

否则，您已经使用了一个选定的类，那么为什么不添加和删除它？

$(function fixed_hover(){
   $("ul.drop_down li").hover(function fixed_hover(){
            $(".fixed_hover").addClass('selected');
        }
    );
});
$(function fixed_hover2(){
      $("ul.drop_down li").mouseleave(function fixed_hover2(){
            $(".fixed_hover").removeClass('selected');
        }
    );
});

Answer 2

尝试在元素上添加类，如下所示：

但请务必在CSS中创建该类...

   $('.myDiv').hover(function(){
   $(this).addClass('active')


   },function(){
   $('.myDiv').removeClass('active')
   });

Jq mouseleave删除背景悬停，阻止正常的css悬停

2 个答案: