how do I modify a :hover style using JavaScript / jQuery?

Question

I have a :hover style definition declared in the CSS stylesheet file:

.myclass:hover {
    border-color: red;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Om.svg/220px-Om.svg.png');
}

Now, under given conditions, I want to change the background-image for this hover style.

I don't know how to do this using JavaScript / jQuery. Is this possible? How?

I think I didn't write the question well. I know what people has answered by now (thanks), but it is not what I asked. — J. Bruni
– J. Bruni, Commented Apr 30, 2013 at 23:11
Look: the first part of the answer is a "YES" or "NO". Can I change the style? The ":hover" style, specifically. — J. Bruni
– J. Bruni, Commented Apr 30, 2013 at 23:13
You will have to use javascript to query the stylesheet and change the Css class. — PSL
– PSL, Commented Apr 30, 2013 at 23:13
Yes that would make more sense. But why can't you define another class with that background image and change the class based on your condition. — PSL
– PSL, Commented Apr 30, 2013 at 23:14

Musa · Accepted Answer · 2013-04-30 23:15:31Z

2

You can add a new style tag cascade over the previous declaration. assuming the css in in the head tag

$('head').append('<style>#element:hover {/
    background-image: url("http://new.image/url");/
}/
<style>');

answered Apr 30, 2013 at 23:15

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Comments

score 1 · Accepted Answer · 2013-04-30 23:21:17Z

1

$('#element').hover(function() {
//on hover
    if(condition === true) {
        $(this).addClass('newBGImage');
    }
}, function() {
//when hover ends
    if($(this).hasClass('newBGImage')) {
        $(this).removeClass('newBGImage');
    }
});

edited Apr 30, 2013 at 23:21

answered Apr 30, 2013 at 23:08

user571545

Comments

DanC · Accepted Answer · 2013-04-30 23:25:18Z

1

Make your CSS be something like this:

.myclass:hover {
    border-color: red;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Om.svg/220px-Om.svg.png'); 
}

.specialCondition:hover {
    background-image: url('http://anotherURL');
}

And then, for that special condition do:

$('.myclass').addClass('specialCondition');

And when the special condition is no longer there, remove the class:

$('.myclass').removeClass('specialCondition');

This way you keep your background-urls where they belong, in the CSS

answered Apr 30, 2013 at 23:25

DanC

8,8559 gold badges48 silver badges64 bronze badges

2 Comments

J. Bruni Over a year ago

+1 I think this is what I will actually do. In fact, this is really the right thing to do! And your answer, although simple, is very well written. Thank you! I would like to accept your answer too, but Musa's dirty trick actually DOES what I wanted and asked for.

J. Bruni Over a year ago

Also, surprisingly, from the answers by now which mentioned the "condition", yours is the only one which considered it correctly.

griegs · Accepted Answer · 2013-04-30 23:09:19Z

0

You want to add a class that has the new background and then on hover use something like

$(this).addClass("YourClassName");

and then on leave

$(this).removeClass("YourClassName");

answered Apr 30, 2013 at 23:09

griegs

22.8k33 gold badges132 silver badges207 bronze badges

Collectives™ on Stack Overflow

how do I modify a :hover style using JavaScript / jQuery?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related