使用Javascript / jquery更改CSS屬性

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

請不要這樣做，除非絕對必要，否則請使用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");
}

我還注意到您在CSS中引用了.red_button類，但是在JS中引用了#red_button ID，您可能想將它們都當作ID？

編輯：更改規則以在單擊並懸停時應用。

這是實際使用的樣式的簡單示例： http : //jsfiddle.net/BMmsD/

Answer 2

嘗試這個 ：

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

Answer 3

我猜您在使用"."出現一些拼寫錯誤"." 在CSS和jquery中的"#"中。

否則使用updated code

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

我希望我足夠清楚嗎？

Answer 4

這個問題/答案最終足以回答我的問題。

我需要對動態設置懸停BG進行一些說明