0

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.

Improve this question
5
  • please add the fiddle so that we can undstnd what is the exact problem Commented Mar 6, 2013 at 6:34
  • 1
    This approach seems unclear - it's better to create another css class, rather than altering element styles in js Commented Mar 6, 2013 at 6:34
  • 1
    You already have .red_button:hover rule, why are trying to reset it in JS? 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 Commented Mar 6, 2013 at 6:43
  • @Christian I updated my answer now that I fully understand the question. Commented Mar 6, 2013 at 8:03

4 Answers 4

Reset to default
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/

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

Comments

0

try this : 

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

1 Comment

You need $(this) because this is not a jQuery object.
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 ?

Improve this answer

3 Comments

So, if I make them the same, I can use the :hover element in the javascript?
you u need hover from javascript ?? its simple hover you want i guess..use css only
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.
0

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

I need a little clarification on dynamically setting a hover BG

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.