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

【问题标题】：Change DIV Background on rollover with Jquery使用 Jquery 在翻转时更改 DIV 背景
【发布时间】：2011-05-13 01:49:59
【问题描述】：

我对 JQuery 很陌生，但已经非常喜欢它了。

我正在尝试在用户翻转 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

【问题讨论】：

标签： jquery html

【解决方案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/

这是直接链接到您的图像，顺便说一句。我希望没关系。

【讨论】：

我通常会使用 css，但我也会显示一个隐藏的 div，我认为我会同时使用它们
很公平。如果您想显示隐藏的 div，可以查看切换、slideToggle() 或 fadeToggle()，如果您想对动画进行更多控制，还可以查看 jquery-ui 库。
我应用了您的反馈，但仍然没有看到变化。我在上面的帖子中添加了一个指向该页面的链接。不知道我做错了什么？
@Denoteone 我认为您的问题在于您应用 .css 的方式，我在查看您的测试页面后更新了我的答案。
感谢您的所有帮助。这个问题可能与我对 jquery 库的引用有关吗？

【解决方案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)");  
});

【讨论】：

我理解第二个函数（）是将图像切换回正常状态...正确吗？
是的。 .hover() 有两个函数，一个在 mouseenter 上，第二个在 mouseleave 上。见api.jquery.com/hover
是的，没错。 Hover 主要是 mouseenter 和 mouseleave 的别名。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你需要鼠标悬停事件：

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

【讨论】：