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 ではクラスを参照しているが、JS では ID を参照していることに気付きました#red_button。おそらく、両方が 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 に答える