CODEWITHSUNDEEP
jquerycss
Roeland
Roeland

Reputation: 3858

do "something" when hovering over a LI, but not when over containing LI's

how would i got about doing "something" when hovering over a list item, but not to containing list items.

example:

$('#mainnav li').hover( function () {
    $(this).find('ul').stop(true,true).slideDown(100);
    $(this).find('a:first').css({
        "background-image": 'url(/assets/images/nav_bg2.png)',
        "color": '#fff',
        "text-shadow" : '1px 1px 1px #000'
    });

}, function () {
    $(this).find('ul').stop(true,true).slideUp(100);
    $(this).find('a:first').css({
        "background-image": 'none',
        "color": '#630872',
        "text-shadow" : '1px 1px 1px #fff'
    });
});

sample html

<div id="mainnav">
<ul>
    <li  class="active nav-home">

        <a href="/">Home</a>
        <ul>
            <li><a href="/home/welcome">Welcome</a></li>
            <li><a href="/home/latest-conveyance">Latest Conveyance</a></li>
        </ul>
    </li>

    <li  class="nav-who-we-are">

        <a href="/who-we-are">Who We Are</a>
        <ul>
            <li><a href="/who-we-are/history">History</a></li>
            <li><a href="/who-we-are/culture">Culture</a></li>
            <li><a href="who-we-are/people">People</a></li>
            <li><a href="who-we-are/vision">Vision</a></li>

        </ul>
    </li>


    <li  class="nav-what-we-do">
        <a href="/what-we-do">What We Do</a>
        <ul>
            <li><a href="/what-we-do/services">Services</a></li>
            <li><a href="/what-we-do/projects">Projects</a></li>

            <li><a href="/what-we-do/portfolio">Portfolio</a></li>
            <li><a href="/what-we-do/philanthropy">Philanthropy</a></li>
        </ul>

    </li>

</ul>
</div>

the problem here is that i want to apply some css to top level list items, but not to ones nested beneath. the code currently applies the css whenever i hover over a list item inside the top level list items. does this make sense?

btw, this is for a menu, i want the top to tabs to stay lighted up while i scroll through dropdown

Upvotes: 1

Views: 447

Answers (3)

user268396
user268396

Reputation: 11986

The easiest thing would be to make sure the CSS specifically selects those li's which you do want to highlight:

#mainnav > ul > li.classname {
   /* css code here */
}

So the combination of JQuery to set the classname, and the CSS selector to only select those li elements that match with the top level ones once classnames have been set should do the trick.

Upvotes: 0

objects
objects

Reputation: 8677

If I understand the question correctly then look at using a child selector

$('#mainnav>ul>li').hover( function () {

Upvotes: 1

rsp
rsp

Reputation: 111424

Be more specific in your selector. Try changing '#mainnav li' to '#mainnav>ul>li' or '#mainnav>ul>li>a'.

Upvotes: 1

Related Questions