1

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

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

我想更改它，以便当它悬停时，active.png 是背景图像。如果不悬停，则变为 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

只需检查事件类型以查看悬停事件是 mouseover 还是 mouseout 事件。

$(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

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

于 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 回答