jquery - 将鼠标悬停在图片上时如何更改 div 背景？

Question

我在 div 中有一个缩略图。我使用另一个图像作为 div 的背景，以便它构成缩略图。当我将鼠标悬停在缩略图上时，我需要能够将背景图像的位置从底部居中更改为顶部居中。

这是 html:

<div class="image">
   <a class="zoom1" title="Sample title" href="images/xyz-large.jpg"><img src="images/portfolio-xyz.jpg" alt="XYZ Inc" /></a>
</div>

这是CSS:

div.image     { width: 314px; height: 231px; background: url(images/bg_portfolio-img.png) no-repeat bottom center; }
div.image img { position: relative; top: 8px; left: 8px; }

我想只用 css 做这个，它会是这样的:

div image a.zoom1:hover  { background-position: top center;}

但是，这显然行不通。我对 jQuery 解决方案持开放态度，但我也需要一些帮助。

在此先感谢您的帮助!

Answer 1

使用 .hover() 尝试这样的事情:

$(".image img").hover(function() {
  $(this).closest(".image").css({ 'background-position': 'top center' });
}, function() {
  $(this).closest(".image").css({ 'background-position': 'bottom center' });
});

当鼠标悬停在 <img> 上时在 class="image" 里面它查找 div 并交换背景，当你向外悬停时也是如此。您可以在 .css() 中添加更多属性如果您想给它增添更多趣味，请调用read here for details .