1

divにカーソルを合わせると完璧に機能するjQueryコードがあります。

$(function() {
    jQuery('#div-to-hover').hover(function(){
        jQuery('#my-background-image').css("background-image", "url(active.png)");
    });
});

ホバーしたときにactive.pngがbackground-imageになるように変更したいと思います。ホバーしないと、normal.pngになります。

4

5 に答える 5

4 
$(function() {
    jQuery('#div-to-hover').hover(function(){
        jQuery('#my-background-image').css("background-image", "url(active.png)");
    }, function(){
        jQuery('#my-background-image').css("background-image", "url(normal.png)");
    });
});
于 2012-08-10T09:14:15.510 に答える
3

イベントタイプを調べて、ホバーイベントがマウスオーバーイベントかマウスアウトイベントかを確認します。

$(function() {
    jQuery('#div-to-hover').hover(function(e){
        var path = (e.type == 'mouseover') ? 'active.png' : 'normal.png';
        jQuery('#my-background-image').css("background-image", "url("+path+")");
    });
});
于 2012-08-10T09:13:34.887 に答える
1

normal.png確かに、さらにjQueryを追加するのではなく、divを常に背景を持ち、現在のコードを使用するように設定する方がよいでしょうか。

于 2012-08-10T09:14:26.713 に答える
1

純粋なCSSでも同じことができます。

#my-background-image {
  background-image: url(normal.png);
} 

#div-to-hover:hover #my-background-image {
  background-image: url(active.png);      
}

http://jsfiddle.net/xyzzy/fjh5z/

于 2012-08-10T09:15:02.473 に答える
0

完全な例とソース：http：//jsfiddle.net/maho/6swag/

要素を直接インラインでスタイル設定するためにJavaScriptを使用しないでください。代わりにクラスを使用してください。そうすれば、別のCSSを使用してスタイルを設定できます。これははるかに優れています。

于 2012-08-10T09:25:16.967 に答える