Im using jQuery to add .hover class to list items.
$("#list .item").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
Then followed by the style in jQuery (I have to supply the style in JS)
$('#list .item.hover').css('padding-left', '20px');
The hover class is being applied but the style is not picked up?
Use CSS for this :)
.item:hover {
padding-left: 20px;
}
No jQuery/JavaScript needed :)
When you use a selector, it finds elements matching that selector at that time and runs the rest of the chain on them, it doesn't create new CSS style rules in the background or anything, you need to define these styles in CSS.
If you do need to use a hover class for some other reason, you can do this:
$("#list .item").hover(function () {
$(this).toggleClass("hover");
});
But you should stick with CSS and :hover in this case :)
:hover only worked on links? So why not use both? And wouldn't just adding this CSS work? .item:hover, .item.hover { padding-left: 20px; }
Try:
$('#list .item:hover').css('padding-left', '20px');
:hover is a psuedo-class.
:hover is not a valid selector, think about how it's used as I note in my answer, that's why it's not useful.You are mixing up style sheets with styles applied to the elements. The jQuery code in your second code block doesn't create a style sheet rule that will apply when the class is added to the element, it applies the style to elements that has the class at the moment that the code is executed.
If you want the style to kick in when you add the class to the element, it has to be a rule in a style sheet. Alternatively you could just change the style in the hover event handlers:
$("#list .item").hover(
function () {
$(this).css('padding-left', '20px');
},
function () {
$(this).css('padding-left', '');
}
);
Is there a reason you're adding the styling through javascript? I bet this works perfectly if you do it through css.
What I'm guessing is happening is that you're adding/removing the class hover, which works, but when the:
$('#list .item.hover').css('padding-left', '20px');
happens, none of those classes actually have a class of hover (at that time). That declaration doesn't persist for all items that get .hover added to them after the fact.
Again, put the style in css
Your .hover class may be declared incorrectly in the style:
#list .item .hover
{
/*
won't be applied when <element class='item hover'/>,
only when <element class='item'><sub-element class='hover'/></element>
*/
}
#list .item.hover
{
/*
will be applied when <element class='item hover'/>,
but not when <element class='item'><sub-element class='hover'/></element>
*/
}
