jQuery this child element hover acitvate background color

Question

I'm still learning jQuery and would appreciate some pointers with this, as I think its simple but not sure how to do it quite.

See below my mark up generated by wordpress, its a side bar list for categorys with post count.

    <div id"sidebar-left">

        <ul id="sidebar-categories">
            <li class="list-header">Contents</li>

            <li class="cat-item cat-item-3">
                <a title="" href="x">News</a>
                <span>1</span>
            </li>
            <li class="cat-item cat-item-4">
                <a title="" href="x">Racing</a>
                <span>4</span>
            </li>
            <li class="cat-item cat-item-1">
                <a title="" href="x">Uncategorized</a>
                <span>1</span>
            </li>
        </ul>

    </div>

Now this is all cool, but my span count is positioned absolute over the top of the a tag in the li.

Which means my problem is, when I hover my a tag, and then hover the span, my hover state of the a tag disappears. So I'm trying to activate the a tag :hover when I roll over the span.

Now I have managed to do this using the jQuery below...

    $("ul#sidebar-categories li span").hover(function() {
        $("ul#sidebar-categories li a").css({ 
            backgroundColor: "464848" // a tag hover bg color
        });
    }, function() {
        $("ul#sidebar-categories li a").css({ 
            backgroundColor: "daddd7" // a tag normal bg color
        });
    });

But obviously as you can see, this will activate all the background colors of all the a tags in this sidebar-categories list.

This my attempt below to only get it to activate the a tag background color inside the current parent li. But it's not working. I've also tried parent but still no worky.

    $("ul#sidebar-categories li span").hover(function() {
        $(this).children("ul#sidebar-categories li a").css({ 
            backgroundColor: "464848" // a tag hover bg color
        });
    }, function() {
        $(this).children("ul#sidebar-categories li a").css({ 
            backgroundColor: "daddd7" // a tag normal bg color
        });
    }); 

Also see screen shot below of the list ui so you can see why I need it to work this way.

So as your hovering the category list, and then mouse over the 'post count', the a:hover pseudo class is lost.

Thanks in advance. Josh

//// Addition my CSS

#sidebar-left ul {
    font-family: 'HelveticaNeueMediumCond';
    position: relative;
    border-bottom: 1px solid #eef0eb;
    padding: 21px 0 0;
    list-style: none;
}

#sidebar-left ul li {
    position: relative;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    height: 48px;
}

.list-header {
    border-top: 1px solid #eef0eb !important;
    border-bottom: 1px solid #c6c8c2 !important;
    height: 15px !important;
    padding: 7px 10px 5px !important;
    background: #c4c7c2;
    color: #fbfcfb;
    font-size: 14px;
}

#sidebar-left ul li a {
    width: 270px;
}

#sidebar-left ul li a {
    height: 20px;
    display: inline-block;
    border-top: 1px solid #eef0eb;
    border-bottom: 1px solid #c6c8c2;
    text-decoration: none;
    font-size: 20px;
    padding: 13px 10px;
    color: #464848;
    text-shadow: #eef0ea 1px 1px 0;
    outline: 0;
}

#sidebar-left ul li a:hover {
    border-top: 1px solid #4c4e4c;
    border-bottom: 1px solid #464848;
    text-decoration: none;
    color: #fbfcfb;
    text-shadow: #2d2e2e 1px 1px 0;
    background: #464848;
}

#sidebar-left ul li span {
    position: absolute;
    right: 10px;
    background: #ffffff;
    padding: 4px 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    font-size: 15px;
    color: #2cbcf5;
    height: 15px;
    min-width: 24px;
    text-align: center;
    z-index: 2;
    top: 0;
    font-family: 'HelveticaNeueBoldCond';
    margin: 12px 0;
    -webkit-box-shadow: 0px 1px 0px 0px #cbcec8;
    -moz-box-shadow: 0px 1px 0px 0px #cbcec8;
    box-shadow: 0px 1px 0px 0px #cbcec8; 
}

#sidebar-left ul li span:hover {
    -webkit-box-shadow: 0px 1px 0px 0px #252525;
    -moz-box-shadow: 0px 1px 0px 0px #252525;
    box-shadow: 0px 1px 0px 0px #252525;    
}

Answer 1

Is there a reason you can't activate the hover on the parent list items, rather than the anchor tag? If that doesn't work, you can use the .siblings() function to select all sibling DOM elements of the span. Try something like this:

$("ul#sidebar-categories li span").hover(function() {
    $(this).siblings().css({ 
        backgroundColor: "464848" // a tag hover bg color
    });
}, function() {
    $(this).siblings().css({ 
        backgroundColor: "daddd7" // a tag normal bg color
    });
}); 

This will select any immediate siblings and change their background color. If you need to further filter the elements, you can pass a CSS selector to the .siblings() function.