Question

我有一个jQuery代码，当你将鼠标悬停在div上时，它可以完美运行。

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

我想改变它，以便在它悬停时，那么active.png就是背景图像。如果没有徘徊，那么它就变成了normal.png。

Answer 1

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

Answer 2

只需检查事件类型，查看悬停事件是否为鼠标悬停或鼠标移动事件。

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

Answer 3

当然最好将div设置为始终具有normal.png的背景并且只使用当前代码，而不是添加更多jQuery？

Answer 4

你可以在纯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/

Answer 5

完整示例和来源：http://jsfiddle.net/maho/6swag/

不要使用javascript直接内联样式元素。请改用类。这样你就可以使用单独的CSS来设置它的样式，这要好得多。

jQuery - 如果悬停，则更改背景图像

5 个答案: