Question

理想情况下，我希望将鼠标悬停在我的<li>菜单中并突出显示每个<li>，但作为测试，我有以下内容可以在悬停时更改课程。有什么想法，为什么这不起作用？

非常感谢。

.dropdownhoverIn a:hover
{
    background-color: White;
    color: #39C;
}

 <form id="form1" runat="server">
        <div id="multiDropMenu">
            <ul id="menu">
                <li><a href="#" id="places">Places</a>
                    <ul id="dropdown1">
                        <li><a href="http://google.com">To Go</a></li>
                        <li><a href="#">To See</a></li>
                    </ul>
                </li>
                <li><a href="#">Transportation</a></li>
            </ul>
        </div>
    </form>

$(document).ready(function() {
    $("#menu li").hover(function() {
        $(this).find("ul").find("a").hover(function() {   
            $(this).addClass("dropdownhoverIn"); 
        });
        $(this).find("ul").slideToggle(250);
    });
});

Answer 1

摆脱“内部”.hover()作业，

$("#menu > li").hover(function() {
    $(this).find("ul a").addClass("dropdownhoverIn");
    $(this).find("ul").slideToggle(250);
});

和您班上的:hover伪选择器。

.dropdownhoverIn {
    background-color: White;
    color: #39C;
}

试一试： http://jsfiddle.net/GKZRU/

当您调用.hover()函数参数时，您分配处理程序。每次悬停在<ul>上都没有理由这样做。

如果您使用的是jQuery的.hover()，那么您在CSS中并不需要它。如果你想在那里获得兼容性，你需要一个单独的CSS选择器。

我还将>添加到.hover()的选择器中，因为我假设您希望仅在#menu的子项上激活它。

jQuery .addClass不会改变css

1 个答案: