CSS id selector not working

Question

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?

Looks valid to me, maybe you need to wrap everything on `document.ready` — Explosion Pills, Jan 10 '13 at 01:56
-1 define "not working" and summarize it in the title; e.g. does `$(the_selector)` return a set of 0 elements or ..? — , Jan 10 '13 at 02:03
Wrap with document.ready and $('#footer ul li a') to make the selector work, but still you can't animate color. Proof that it works: http://jsfiddle.net/Mhp2c/10/ To animate color, check out http://motyar.blogspot.se/2010/07/animate-color-using-jquery.html — Robin Manoli, Jan 10 '13 at 02:13
Your question has an answer [here](http://stackoverflow.com/questions/7516407/jquery-animate-text-color) — jec, Jan 10 '13 at 02:13

score 5 · Answer 1 · answered Jan 10 '13 at 01:59

5

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;
}

answered Jan 10 '13 at 01:59

Niet the Dark Absol

320,036
81
464
592

1

Granted, IE 9 and below will just see an abrupt colour change, but such a minor aesthetic difference is no excuse for using jQuery for the most mundane of tasks ;) – Niet the Dark Absol Jan 10 '13 at 02:00
0.2s TRANSITION NO WORK IN IE6 NOT GUD ENUFF. `=]` – Fabrício Matté Jan 10 '13 at 02:02
1

On a less ironic tone, I agree that catering to old browsers for such minor progressive enhancement is a waste of time for the developer (and some microseconds performance loss for end-users?). – Fabrício Matté Jan 10 '13 at 02:04
I used transitions initially but IE9 incompatibility bothered me too much. :P – Tom Maxwell Jan 10 '13 at 02:09
Upgrade to IE10, then. It's out for Windows 7 and it works tremendously well. – Niet the Dark Absol Jan 10 '13 at 02:22

Jason · Answer 2 · 2013-01-10T02:30:45.127

3

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

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

edited Jan 10 '13 at 02:30

answered Jan 10 '13 at 01:56

Jason

3,330
1
33
38

Yup, I know. Tried changing the color to be under that selector in my CSS, but it didn't make the jQuery code work. – Tom Maxwell Jan 10 '13 at 01:59
If you're going with a jQuery solution, it'd be much more efficient to use the `.hover()` method ;) – Niet the Dark Absol Jan 10 '13 at 02:24
You're totally right, I was just changing the selector but I should have added that as well. Post edited. – Jason Jan 10 '13 at 02:30

score 2 · Answer 3 · edited May 23 '17 at 11:43

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?

Tried it, didn't work. In my CSS I'm using color on the ul li a, too. — Tom Maxwell, Jan 10 '13 at 01:58

score 1 · Answer 4 · answered Jan 10 '13 at 01:58

1

You could target the A element instead:

$('#footer ul a')

answered Jan 10 '13 at 01:58

brain

2,507
1
13
12

CSS id selector not working

4 Answers4