Изменение свойств CSS с помощью Javascript/jquery

Question

Я пытаюсь настроить мой CSS динамически. Вот мой 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; 
} 

Что после того, как он щелкнул получает изменено на что-то вроде этого:

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

Но если я пытаюсь изменить: парить атрибут с чем-то вроде $("#red_button:hover").css("background","url(stop.png)"); он просто меняет фон (а не фон hover). Так что лучший способ сделать это? Я пробовал несколько разных вещей, например, с jQuery, но не смог заставить ничего работать.

Answer 1

Этот вопрос/ответ в конечном итоге отвечал на мой вопрос довольно адекватно.

I need a little clarification on dynamically setting a hover BG

Answer 2

попробовать это:

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

Answer 3

Пожалуйста, не делайте этого, используйте класс CSS, если абсолютно не требуется. Это позволит отделить все ваши стили в CSS, где он принадлежит, и очистить ваш JS одновременно.

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"); 
} 

Я также заметить, что вы имеете в виду .red_button класса в CSS, но #red_button ID в JS, вы, вероятно, значит для них обоих быть идентификаторами?

EDIT: Изменить правило, применяемое при нажатии и зависании.

Вот простой пример из стилей в действии: http://jsfiddle.net/BMmsD/

Answer 4

Вы делаете ошибку опечатки я думаю, как вы используете "." в CSS и "#" в JQuery.

еще использовать updated code

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

Я надеюсь, что я достаточно ясно?