尝试在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

也许你是在兄弟选择器之后：

.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>

Answer 2

您是否尝试为所需的不同类型的悬停添加特定类，并将它们添加到您喜欢的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 3

这对你有用。

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

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