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('http://goo.gl/zdLfy');
}

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, Apr 30 '13 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, Apr 30 '13 at 23:13
You will have to use javascript to query the stylesheet and change the Css class. — PSL, Apr 30 '13 at 23:13
@PSCoder: great... so my question should be "How can I interact with the CSS stylesheet using JavaScript / jQuery?" Do you know? — J. Bruni, Apr 30 '13 at 23:14
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, Apr 30 '13 at 23:14
possible duplicate of [Setting CSS pseudo-class rules from JavaScript](http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript) — dsgriffin, Apr 30 '13 at 23:17
@Zenith: You are right. I tried to delete my question, but SO didn't allow because it has answers... Voted for "close" now. — J. Bruni, Apr 30 '13 at 23:22
@Zenith: indeed, it is a copy/paste slightly changed... there is another answer which contains an interesting trick, I liked it and it seems to work - I've accepted it instead — J. Bruni, Apr 30 '13 at 23:29

score 2 · Accepted Answer · answered Apr 30 '13 at 23:15

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 '13 at 23:15

Musa

96,336
17
118
137

score 1 · Answer 2 · 2013-04-30T23:21:17.757

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 '13 at 23:21

answered Apr 30 '13 at 23:08

score 1 · Answer 3 · answered Apr 30 '13 at 23:25

1

Make your CSS be something like this:

.myclass:hover {
    border-color: red;
    background-image: url('http://goo.gl/zdLfy'); 
}

.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 '13 at 23:25

DanC

8,595
9
42
64

+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 Apr 30 '13 at 23:34
Also, surprisingly, from the answers by now which mentioned the "condition", yours is the only one which considered it correctly. – J. Bruni Apr 30 '13 at 23:37

score 0 · Answer 4 · answered Apr 30 '13 at 23:09

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 '13 at 23:09

griegs

22,624
33
128
205

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

4 Answers4