jquery - jQuery .addClass 不会改变 css

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.