尝试为 css 中的多个图像制作不同的悬停动画

Question

所以我在 HTML 中有一些这样的图片

<div class="thumb"> 
    <a href="website1"><img src="image1.jpg" alt="name1"></a>
    <a href="website2"><img src="image2.jpg" alt="name2"></a>
    <a href="website3"><img src="image3.jpg" alt="name3"></a>                      
</div>

我试图让它们具有特定的悬停效果 - 当您将鼠标悬停在 image1 上时，image1 会变大，而 image2 和 image3 会变小，并且不透明度会降低。这是一个只有三张图片的示例，但实际上我在不同页面上有不同数量的图片。

我在 CSS 中尝试过，但它似乎无法正常工作。问题是，只要鼠标位于 .thumb 上方而不是图像上方，就会触发第一个效果，但我还没有找到一种方法来处理除悬停的图像以外的所有图像。

.thumb:hover img {
    opacity: .25;
    transform: scale(.8);
}

.thumb img:hover {
    opacity: 1;
    transform: scale(1.2);
}

我更喜欢将它放在 CSS 中，但如果它需要 javascript 也没关系。任何帮助将不胜感激。

Answer 1

您是否尝试过为您想要的不同类型的悬停添加特定的类并将它们添加到您喜欢的 img 标签中？

.thumb img.opacity-1:hover {
    opacity: 1;
    transform: scale(1.2);
}
.thumb img.opacity-05:hover {
    opacity: 0.5;
    transform: scale(1.2);
}

Answer 2

这对你有用。

.thumb img {
 opacity: 0.25;
 transform: scale(0.8);
}

.thumb img:hover {
 opacity: 1;
 transform: scale(1.2);
}

Answer 3

也许你在寻找同级选择器：

.thumb{
  display: inline-block;
}
.thumb:hover img{
  opacity: .25;
  transform: scale(.8);
  transition: opacity 1s, transform 1s;
}

.thumb a:hover img{
  opacity: 1;
  transform: scale(1.2);
}

<div class="thumb"> 
    <a href="website1"><img src="http://placehold.it/100x100/6666ff" alt="name1"></a>
    <a href="website2"><img src="http://placehold.it/100x100/ff6666" alt="name2"></a>
    <a href="website3"><img src="http://placehold.it/100x100/66ff66" alt="name3"></a>                      
</div>

更新

如果您正在寻找 JS 解决方案，它会是这样的：

$('.thumb a').hover(function(){
  $(this).siblings().addClass('shrink').removeClass('grow');
  $(this).addClass('grow').removeClass('shrink');
}, function(){
  $(this).siblings().removeClass('shrink');
  $(this).removeClass('grow');
});

.thumb a{
  margin: 20px;
}
.thumb a.shrink img{
  opacity: .25;
  transform: scale(.8);
  transition: opacity 1s, transform 1s;
}

.thumb a.grow img{
  opacity: 1;
  transform: scale(1.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumb"> 
    <a href="website1"><img src="http://placehold.it/100x100/6666ff" alt="name1"></a>
    <a href="website2"><img src="http://placehold.it/100x100/ff6666" alt="name2"></a>
    <a href="website3"><img src="http://placehold.it/100x100/66ff66" alt="name3"></a>                      
</div>

尝试为 css 中的多个图像制作不同的悬停动画

Trying to make different hover animations for multiple images in css

html

javascript

css

hover

更新