Can I use pseudo classes inside jQuery .css() method?

Question

I have the following jQuery code which works as just the class, but the :hover causes it not to work.

$('.dd_question:hover').css('border','1px dashed #333333');

Is there some special code I can use inside th $() method? Or is :hover simply not allowd?

simply not allowed. Well, it is allowed, but think about it and you'll probably realize why it doesn't work. — user400654
– user400654, Commented May 20, 2013 at 17:50
try $('.dd_question').hover(function() { $(this).css('border','1px dashed #333333'); }); — Tamil Selvan C
– Tamil Selvan C, Commented May 20, 2013 at 17:50
Just curious, if you are just toggling the CSS, why not simply use CSS? — Scott Sword
– Scott Sword, Commented May 20, 2013 at 17:51
@Swordfish0321: The obvious answer is that he only sometimes wants hovering over the dd_question elements to toggle the border. If it is behavior that should always happen, then you are of course correct, and straight CSS is the way to go. — user1618143
– user1618143, Commented May 20, 2013 at 17:56

user400654 · Accepted Answer · 2013-05-20 17:51:49Z

6

The jQuery selector selects elements that match the selector when the code is executed, not when the user hovers over an element.

With that in mind, $('.dd_question:hover') will only select elements that have that class and that were currently being hovered over when the code was executed which most likely was 0 elements.

You need to either use the mouseenter and mouseleave events (or hover for short), or simply use css.

answered May 20, 2013 at 17:51

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1618143 · Accepted Answer · 2013-05-20 17:53:40Z

6

Other people have already explained why the code you're using isn't working, but the other question is how to fix it. Probably the best way to get the effect you're looking for is to have

.hoverborder:hover {border: 1px dashed #333333;}

in your css, and then use

$('.dd_question').addClass('hoverborder');

in your javascript.

answered May 20, 2013 at 17:53

user1618143

1,7481 gold badge13 silver badges27 bronze badges

1 Comment

Eric Over a year ago

Thanks, I'm looking for work arounds now since it's clear that simply :hover inside my jQuery method won't work, and this looks like it may do the trick.

Collectives™ on Stack Overflow

Can I use pseudo classes inside jQuery .css() method?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related