CODEWITHSUNDEEP
jquerycsscss-selectors
Tom Maxwell
Tom Maxwell

Reputation: 9573

CSS id selector not working

I'm trying to make some hover actions using jQuery, but I think the selector isn't working. Here's the HTML:

<div id="footer">
            <ul>
                <li><a href="#">Start a Something</a></li>
                <li><a href="#">Send a Gift</a></li>
                <li><a href="#">How It Works</a></li>
                <li><a href="#">Secure Service</a></li>
                <li><a href="#">About Company</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <ul>
                <li>&copy; 2012 Company</li>
                <li><a href="#">Terms of Use and Privacy</a></li>
            </ul>
        </div>

And here's the jQuery:

$('#footer ul li').mouseover(function(){
        $(this).animate({
            color: "white"
        }, 200);
    }).mouseout(function(){
        $(this).animate({
            color: "#bcbdbd"
        }, 200);
});

What selector should I be using?

Upvotes: 2

Views: 723

Answers (4)

Jason
Jason

Reputation: 3360

$('#footer ul li a').hover(...

They're links so color on the <li> won't change them.

Upvotes: 3

Calvin
Calvin

Reputation: 1295

I think you should be using:

$('#footer ul li a');

Your selector isn't wrong, but you should be applying those actionhandlers and animations to the <a> tags instead.

adjusting color in the wrapping <li> won't override the color that was default with the <a> tags

EDIT:

As to the answer of what you want to achieve, you will have problems trying override the CSS :hover with JQuery alone. But JQuery UI employs http://api.jquery.com/jQuery.cssHooks/ in their animate() http://jqueryui.com/animate/

Using that, using animate on .hover() or .mouseover() will override the default CSS :hover properties to use the JQuery's animate.

Example: http://jsbin.com/udahe3/399/

Answer elsewhere on SO: Override a:hover with jQuery?

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324600

Why oh why are you using jQuery for this task?

RAW CSS!

#footer ul li a { /* or even just "#footer a" */
    color: #bcbdbd;
    transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
    /* Chrome does not yet support the un-prefixed version */
}
#footer ul li a:hover { /* same comment as above */
    color: #fff;
}

Upvotes: 5

brain
brain

Reputation: 2517

You could target the A element instead:

$('#footer ul a')

Upvotes: 1

Related Questions