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 instead of just the anchor element's border-top-color when hovered. Below is my code.

$("#header #headerlist li a:hover").css("border-top-color","rgb(225, 149, 79)");

Why does it change the #header #headerlist li a border-top-color and the #header #headerlist li a:hover properties rather than just the #header #headerlist li a:hover property?

Answer 1

The reason your example doesn't work is because the selector has no way of detecting :hover since that's a pure CSS thing. Instead you might try using the actual jquery hover method:

$("#header #headerlist li a").hover(
  function () {
    $(this).css("border-top-color", "#FF0000");
  }, 
  function () {
    $(this).css("border-top-color", "#000000");
  }
);

Alternatively, you could also use the addclass method as well:

$("#header #headerlist li a").hover(
  function () {
    $(this).addClass('hover-highlight');
  }, 
  function () {
    $(this).removeClass('hover-highlight');
  }
);

This could be further simplified to:

$("#header #headerlist li a").hover(function () {
    $(this).toggleClass('hover-highlight');
});