0

我正在尝试动态调整我的 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");
}

但是，如果我尝试使用类似的东西更改 :hover 属性，$("#red_button:hover").css("background","url(stop.png)");它只会更改背景（而不是悬停背景）。那么解决这个问题的最佳方法是什么？我已经尝试了一些不同的东西，比如使用 jQuery，但没有任何东西可以工作。

4

4 回答 4

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

我还注意到您指的.red_button是 CSS 中的类，但#red_buttonJS 中的 ID，您可能是指它们都是 ID？

编辑：更改规则以在单击和悬停时应用。

这是一个简单的样式示例：http: //jsfiddle.net/BMmsD/

于 2013-03-06T06:40:23.037 回答
0

试试这个 ：

$("#red_button").mouseover(function() {
   this.css("background","url(stop.png)");
});
于 2013-03-06T06:37:28.513 回答
0

我猜你"."在 css 和"#"jquery 中使用时会出现一些拼写错误。

否则使用updated code

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

我希望我足够清楚？

于 2013-03-06T06:40:46.493 回答
0

这个问题/答案最终很好地回答了我的问题。

我需要澄清一下动态设置悬停 BG

于 2013-06-20T23:55:13.217 回答