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。

Answer 2

Javascript是一种简单的方法。

如果你只想用CSS做，你可以完全取出额外的div，并将背景图像添加到img中，然后给它填充。这样，您只需更改img：hover的背景位置。

Answer 3

css解决方案

如果您的链接（a）完全填写了父div，则可以

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

完全填写，因为那时交互性没有差异（无响应链接，但如果div大于a则更改bg）
不幸的是，这对IE6来说是禁忌的

jQuery解决方案

$(".image a").hover(function(){
  $(this).parent('.image').addClass('hover');
},function(){
  $(this).parent('.image').removeClass('hover');
});

然后在css

div.image { background-position: center bottom; }  //normal
div.hover { background-position: center top; } //override

jQuery note

1

如果.hover太模糊，请使用

div#some-holding-div div.hover {...}

我确定你的标记中有一些持有div

2

另外，你可以直接从jQuery设置css属性（而不是添加类和删除类，你可以设置nackgroundPosition并将其设置回来）

注释

它只是从我的头脑中，可能可能是为了更好地满足您的需求而定制 - 并且没有经过测试。

当鼠标悬停在图片上时，如何更改div背景？

3 个答案:

css解决方案

jQuery解决方案

jQuery note

1

2

注释