jQuery 更改 CSS 背景位置和鼠标悬停/鼠标移出

Posted 2023-03-06

【中文标题】jQuery 更改 CSS 背景位置和鼠标悬停/鼠标移出

【英文标题】：jQuery change CSS background position and mouseover/mouseout

【发布时间】：2011-01-31 16:57:45

【问题描述】：

我有一个由单个图像（例如精灵）组成的菜单。为了显示悬停图像，我只需将背景图像向下移动。我希望这种效果可以由 jQuery 控制并进行动画处理。

这是一个示例菜单项。

 <ul>
  <li id="home"><a href="#"></a></li>
 </ul>

这就是我在玩弄的东西。我对 jQuery 很陌生，在正确选择选择器时遇到问题。

 $(document).ready(function()

  $('#home a');

   // Set the 'normal' state background position
   .css( backgroundPosition: "0 0" )

   // On mouse over, move the background
   .mouseover(function()
    $(this).stop().animate(backgroundPosition:"(0 -54px)", duration:500)
   )

   // On mouse out, move the background back
   .mouseout(function()
    $(this).stop().animate(backgroundPosition:"(0 0)", duration:500)
   )

 );

你能指出我做错了什么吗？我知道选择器可能不正确，但我很难弄清楚如何操作锚。

【问题讨论】：

到底发生了什么或没有发生什么？

您在 $('#home a') 选择器的末尾缺少一个分号。这样能解决吗？

@Pekka，基本上，什么都没有发生。背景没有出现，这让我相信选择器是错误的。 @ryanulit，添加了分号。不幸的是，没有变化。

为什么要在$('#home a') 中添加分号？这绝对是错误的，并且切断了随后的链式命令。

我们确定“背景位置”是 jQuery 可以动画的东西吗？我很少使用“animate()”，但从查看代码和阅读文档来看，它似乎真的想要处理像“height”和“width”这样具有单个数值的东西。 （另外，在我看来，动画精灵之间的过渡一般来说有点奇怪，但我当然不知道这些精灵长什么样。）

【参考方案1】：

如果您没有为过渡设置动画 - 并且考虑到我已将这些图像分组为精灵，我不知道您为什么会这样做 - 那么您会想要这样的东西：

$(document).ready(function()
  $('#home a')
    // On mouse over, move the background on hover
   .mouseover(function() 
     $(this).css('backgroundPosition', '0 -54px');
   )
   // On mouse out, move the background back
   .mouseout(function() 
     $(this).css('backgroundPosition', '0 0');
   )
 );

现在，如果您正在尝试对其进行动画处理，那么您的 CSS 和“动画”调用的语法就很糟糕。

$(document).ready(function()
  $('#home a')
   // On mouse over, move the background on hover
   .mouseover(function()
     $(this).stop().animate(backgroundPosition: "0 -54px", 500);
   )
   // On mouse out, move the background back
   .mouseout(function()
      $(this).stop().animate(backgroundPosition: "0 0", 500);
   )
 );

再次，我怀疑 jQuery 是否能够为您制作“backgroundPosition”动画，但是我不经常使用“animate()”，而 jQuery 总是让我感到惊讶。

编辑：这是一个页面：http://snook.ca/archives/javascript/jquery-bg-image-animations/

【讨论】：

那是我在看的那个！你的第二个 sn-p 修复了一切。我也错过了解决其余问题的插件。谢谢！

哦，天哪，我很高兴它成功了。我得看看这个插件，因为现在我很好奇人们可以用它做些什么:-)

是的，你肯定需要这个插件 - plugins.jquery.com/project/backgroundPosition-Effect欢呼！

【参考方案2】：

backgroundPosition:"(0 -54px)"

（你不想要括号。CSS background-position 规则中没有括号。）

无论如何，jQuery 都不知道如何为backgroundPosition 之类的复合值设置动画。在 IE 中，您可以使用 backgroundPositionY 访问它，作为一个简单的值，jQuery 可以 动画。但是，这是非标准的，在其他地方不起作用。

Here's a plugin 声称可以修复它。

【讨论】：

是的，我认为我链接到我的答案的那个页面引用了它。

【参考方案3】：

我喜欢这种方法（只是 css）

.maintopbanner a:hover
    background-position: -200px 0 !important;
.maintopbanner a 
 -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;

【参考方案4】：

我想你的背景绑定到li？！但是this 设置为选择器的a，所以如果我的假设是正确的，您需要将代码更改为

$(document).ready(function()

  $('#home a')

   // On mouse over, move the background on hover
   .mouseover(function()
    $(this).parent().stop().animate(backgroundPosition:"(0 -54px)", duration:500)
   )

   // On mouse out, move the background back
   .mouseout(function()
    $(this).parent().stop().animate(backgroundPosition:"(0 0)", duration:500)
   )

 );

【讨论】：

由于 IE6 的限制，背景实际上设置在锚点上。我希望我可以简单地将它设置为列表项，但它会在 IE 中完全中断。

【参考方案5】：

         $('#home a')
.mouseenter(function()
        $(this).parent().stop().animate(backgroundPosition:"(0 -54px)",500)
       )
.mouseleave(function()
        $(this).parent().stop().animate(backgroundPosition:"(0 0)",500)
       )

//尽可能使用 MouseEnter 和 MouseLeave，并且您不需要在当前版本的 jQuery 中输入持续时间。希望这会有所帮助。