Question

我对JQuery很新，但已经很喜欢它了。

我正在尝试在用户rollsovers时更改div的背景。但我不能让bg更新。到目前为止，这就是我所拥有的：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#fish{background-image:url(images/fish_off.jpg);width:459px;height:474px;}
</style>

 <script type="text/javascript" src="javascript/jquery.js"></script>     

 <script type="text/javascript">                                         
$('#fish').hover(
  function(){$('#fish').css({background: "url(images/fish_on.jpg)"})},
  function(){$('#fish').css({background: "url(images/fish_off.jpg)"})}
);


 </script>      

</head>

<body>

<div id="fish"></div>

</body>
</html>

这是我的测试页面，根据以下信息，我仍有问题：

Test Page

Answer 1

使用.mouseenter（）或者如果你想在mouseout上应用一个类，也可以使用.hover（） http://api.jquery.com/mouseenter/ http://api.jquery.com/hover/

$("div").hover(
  function () {
      $(this).css("background", "#ddd");
  }, 
  function () {
      $(this).css("background", "#ccc");
  }
);

如果你只想要一个推杆

，你也可以通过css完成这个

    #fish { background: #fff; 
    #fish:hover { background: #ccc; }

查看这个使用悬停的工作小提琴 http://jsfiddle.net/faLdY/

通过jquery应用背景图像略有不同结帐这个类似的问题 Switching a DIV background image with jQuery

请注意您在示例页面中应用css的方式是错误的。

更改

$('#fish').hover(
  function(){$('#fish').css({background: "url(images/fish_on.jpg)"})},
  function(){$('#fish').css({background: "url(images/fish_off.jpg)"})}
);

到这个

$('#fish').hover(
  function(){$('#fish').css("background-image", "url(images/fish_on.jpg)")},
  function(){$('#fish').css("background-image", "url(images/fish_off.jpg)")}
);

编辑：

这是一个工作小提琴，正是你所要求的 http://jsfiddle.net/C7KxR/

这与您的图片直接相关，顺便说一句。我希望没关系。

Answer 2

更改

$('#fish').click(function()
{
  $('#fish').css("background-image", "url(images/fish_on.jpg)");  
});

到

$('#fish').hover(function()
{
  $('#fish').css("background-image", "url(images/fish_on.jpg)");  
}, function()
{
  $('#fish').css("background-image", "url(images/fish_ooff.jpg)");  
});

Answer 3

$('#fish').hover(
  function(){$('#fish').css({background: "url(images/fish_on.jpg)"})},
  function(){$('#fish').css({background: "url(images/fish_off.jpg)"})}
);

你想使用.hover，它需要两个回调。一个用于mousein，一个用于mouseout。

Answer 4

你需要鼠标悬停事件：

$('#fish').mouseover(...

使用Jquery在翻转时更改DIV背景

4 个答案: