0

このルールを使用して、ボタンが押されているように、クリックすると小さい画像に切り替わる画像があります。

div#about.mouseDown {
    background: transparent url("../resources/about_down.png") no-repeat top left;
}

誰かがマウスをクリックして div の外に移動した場合に、その状態が維持されるようにするには、次のようにします。

$("#about").mouseleave(function(){
            $(this).css("background", 'transparent url("/resources/about.png") no-repeat top left');
        });

ただし、それが呼び出されると (マウスを問題の div に移動してから外に移動すると)、上記の CSS ルールは適用されなくなります。インスペクターをチェックインしましたが、単に適用されていません。

それはなぜでしょうか？

4

2 に答える 2

3

問題は、jQuery がインラインコードを介してスタイルを追加するため、div が次のようになることです。

<div id="about" class="mouseDown" style="background: transparent url('../resources/about_down.png') no-repeat top left;"></div>

CSS を再び機能させるには、以下を使用する必要があります!important(これはお勧めできません)。

div#about.mouseDown {
    background: transparent url("../resources/about_down.png") no-repeat top left !important;
}

またはcssをjs関数にも入れるには：

$("#about").mousedown(function(){
    this.style.background = "transparent url('/resources/about_down.png') no-repeat top left";
});

アップデート

別の良い点: jQuery 操作後に CSS が適切に適用されない?

于 2013-06-26T15:41:06.383 に答える
0

私はあなたが欲しいと思います

$("#about").mouseleave(function(){
    $(this).css("backgroundUrl", "url('/resources/about.png')");
}).mouseenter(function(){
    $(this).css("backgroundUrl", "url('../resources/about_down.png')");
});
于 2013-06-26T15:40:30.143 に答える