Question

我正在组建一个导航栏并找到一个很好的脚本，让li在显示第二级菜单时保持“悬停”状态。在我的上一篇文章中，我有一个搜索栏，想要删除悬停。代码：

<script type="text/javascript">
$(document).ready(function() {

    $("ul#topnav li").hover(function() { //Hover over event on list item
        $(this).css({ 'background' : '#7bbdc2 '}); //Add background color + image on hovered list item
        $(this).find("span").show(); //Show the subnav 
    } , 
    function() { //on hover out...
        $(this).css({ 'background' : 'none'}); //Ditch the background
        $(this).find("span").hide(); //Hide the subnav
    }); 
});
</script>

Answer 1

没有测试我的建议。试试这个：

$("ul#topnav li:last-child").hover(nil);

按照现有代码。你的代码将悬停元素添加到#topnav中的所有li元素，所以在此之后找到最后一个元素并删除悬停。

注意：这不是最佳解决方案，因为当您在搜索下方添加一些新的li元素时，您将得到错误的结果。更好地为搜索li元素提供其自己的唯一标识符，并删除此元素上的悬停：

$("ul#topnav li#search").hover(nil);

编辑：

甚至更好 - 从一开始就使用属性不等于选择器..

而不是：

$("ul#topnav li").hover(function() {
  // ...

为您的搜索li id“搜索”并执行此操作：

$('ul#topnav li[id!="search"]').hover(function() {
  // ...

http://api.jquery.com/attribute-not-equal-selector/

Answer 2

您可以从选择器exclude an element。那样做。

<script type="text/javascript">
$(document).ready(function() {

    $("ul#topnav li").not('li:last').hover(function() { //Hover over event on list item
        $(this).css({ 'background' : '#7bbdc2 '}); //Add background color + image on hovered list item
        $(this).find("span").show(); //Show the subnav 
    } , 
    function() { //on hover out...
        $(this).css({ 'background' : 'none'}); //Ditch the background
        $(this).find("span").hide(); //Hide the subnav
    }); 
});
</script>

在javascript中更改最后的li hover

2 个答案: