jQuery css() function changing 'a' property not 'a:hover' property

Question

I\'m having a bit of trouble with the jQuery css() function at the moment. It is changing the css value of the anchor element\'s border-top-color i

Answer 1

The reason it doesn't work is because the :hover bit doesn't actually give the selector any information about an element.

a:hover in CSS matches on the same exact elements as a, it's just defining a different set of properties for when the user is hovering over those elements.

The jQuery selector is designed to find (select) elements, not to style them.

The css() method simply sets an inline style on the elements that are selected, it does not add or change any actual CSS declarations.

As other have mentioned, you can use the hover() event to get the same behavior. Although, adding a class on the fly is probably better, as another answerer described.

However, if you don't need to make it change on-the-fly, I recommend using plain old CSS since it is faster and does not require a user to have javascript enabled.