Change CSS properties using Javascript/jquery

Question

I'm trying to adjust my CSS dynamically. Here's my CSS:

.red_button {
  background:url(record.png);
  padding: 19px 251px;
  cursor: pointer;
  background-repeat: no-repeat;
}

.red_button:hover {
  background:url(record-hover.png);
  cursor: pointer;
  background-repeat: no-repeat;
}

Which after it is clicked gets changed to something like this:

function recordStarted() {
  started = true;
  $("#red_button").css("background","url(stop.png)");
  $("#red_button").css("background-repeat","no-repeat");
}

But if I try to change the :hover attribute with something like $("#red_button:hover").css("background","url(stop.png)"); it just changes the background (not the hover background). So what is the best way to go about this? I have tried a few different things like with jQuery, but have not been able to get anything to work.

please add the fiddle so that we can undstnd what is the exact problem — supersaiyan
– supersaiyan, Commented Mar 6, 2013 at 6:34
This approach seems unclear - it's better to create another css class, rather than altering element styles in js — k102
– k102, Commented Mar 6, 2013 at 6:34
You already have .red_button:hover rule, why are trying to reset it in JS? — dfsq
– dfsq, Commented Mar 6, 2013 at 6:35
This is for a video recording widget, so the first click records the video and changes the button to a "Stop Recordng" button, which itself has a regular and a :hover image — Christian
– Christian, Commented Mar 6, 2013 at 6:43
@Christian I updated my answer now that I fully understand the question. — Daniel Imms
– Daniel Imms, Commented Mar 6, 2013 at 8:03

Derek 朕會功夫 · Accepted Answer · 2013-03-06 08:16:52Z

1

Please don't do this, use a CSS class unless absolutely required. This will separate all your styling into CSS where it belongs and clean up your JS at the same time.

CSS

#red_button.clicked {
    /* Applied when the button is clicked and NOT hovered */
}

#red_button.clicked:hover {
    /* Applied when the button is clicked and hovered */
    background: url(stop.png);
    background-repeat: no-repeat;
}

JS

function recordStarted() {
    started = true;
    $("#red_button").addClass("clicked");
}

I also notice that you are referring to the .red_button class in CSS but the #red_button ID in JS, you probably mean for them both to be IDs?

EDIT: Change the rule to apply when clicked and hovered.

Here is a simple example of the styles in action: http://jsfiddle.net/BMmsD/

edited Mar 6, 2013 at 8:16

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

answered Mar 6, 2013 at 6:40

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

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

Comments

Prasanth Bendra · Accepted Answer · 2013-03-06 06:37:28Z

0

try this :

$("#red_button").mouseover(function() {
   this.css("background","url(stop.png)");
});

answered Mar 6, 2013 at 6:37

Prasanth Bendra

33.1k9 gold badges56 silver badges74 bronze badges

1 Comment

jfriend00 Over a year ago

You need $(this) because this is not a jQuery object.

Derek 朕會功夫 · Accepted Answer · 2013-03-06 08:17:28Z

0

You doing some typo error I guess as you are using "." in css and "#" in jquery.

else use updated code

$(document).ready(function() {
    $(".red_button").click(function() {
        $(".red_button").css("background","record-hover.png");
    });
});

I hope I am clear enough ?

edited Mar 6, 2013 at 8:17

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

answered Mar 6, 2013 at 6:40

supersaiyan

1,7306 gold badges16 silver badges39 bronze badges

3 Comments

Christian Over a year ago

So, if I make them the same, I can use the :hover element in the javascript?

supersaiyan Over a year ago

you u need hover from javascript ?? its simple hover you want i guess..use css only

Christian Over a year ago

No, but I already have a :hover set up in css. I am changing the background image with a click though with javascript and need to change the :hover element to match it.

Community · Accepted Answer · 2017-05-23 12:13:14Z

0

This question/answer ended up answering my question pretty adequately.

I need a little clarification on dynamically setting a hover BG

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jun 20, 2013 at 23:55

Christian

7553 gold badges10 silver badges30 bronze badges

Collectives™ on Stack Overflow

Change CSS properties using Javascript/jquery

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related