jQuery css() function changing 'a' property not 'a:hover' property
Solution 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');
});
Solution 2
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.
Solution 3
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.
Thomas Smith
Updated on May 10, 2020Comments
-
Thomas Smith about 4 years
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'sborder-top-color
instead of just the anchor element'sborder-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? -
Sami Ahmed Siddiqui about 15 yearsAgreed. I usually use the add/remove class approach since it keeps all the styles in one place. You don't have to edit javascript to change the hover colours, for example.
-
user3167101 about 15 yearsBetter because you're minimising presentational data in your behavioural layer.
-
Chad Grant about 15 yearstoggleClass('hover-highlight'); ;)
-
Chad Grant about 15 years#header is a bit excessive too in that selector, imho
-
tmsppc about 15 years@Chad While ID's are supposed to be unique in each page, you might have server-side includes that put certain IDs as children of different elements depending on the section of the site you're seeing, so chaining IDs might be useful indeed.
-
Thomas Smith about 15 yearsThankyou for everyone's answers, I think I'm going create a new class and use the jQuery addClass method. Thankyou all.
-
tmsppc about 15 yearsIf this answer is the one for your question, then please mark as answered by clicking on the thick at the left so others with the same problem know how to solve it ;)
-
Kevin M about 9 yearsThis doesn't work. JavaScript console says:
unrecognized expression: unsupported pseudo: hover
-
ceed about 9 yearsbroken since jquery 1.9