jQuery .addClass does not change css

Question

Ideally I want to hover over my <li> in my menu and highlight each <li> but as a test I have the following to change the class on hover. Any thoughts why this won't work?

Thanks so much.

.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"&gt;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

Get rid of the "inner" .hover() assignment,

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

and the :hover pseudo selector on your class.

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

Try it out: http://jsfiddle.net/GKZRU/

When you call .hover() a function parameter, you are assigning a handler. There's no reason to do that on each hover over the <ul>.

And if you're using jQuery's .hover(), you don't really need it in the CSS. If you want it there for compatibility, you need a separate CSS selector for it.

I also added > to the selector for the .hover() since I assume you want it to activate only on the child of #menu.