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

I don't know exactly why, but this type of changes are better done in CSS, so I'd suggest that, if you really need to change this through JS, create a CSS class, then change that in JS.

CSS

#header #headerlist li a.fancy-border:hover{
  border-top-color: rgb(225, 149, 79);
}

JS

$("#header #headerlist li a").addClass("fancy-border");

That way you can better separate functionality from presentation.