Question

我有6张照片。当它们在图像上滚动时，使用css悬停进行更改。单击图像时，将显示原始图像（再次使用css）但我希望在选择一个图像时其余图像变暗。我一直在研究各种JS选项，但似乎无法让它工作。有没有人有任何建议？

Answer 1

另一种解决方案是在所选图像和父图像中添加一个类。这样可以更容易维护，因为样式都是在css中完成的。

这里的简单示例：

CSS

.img{
    display:inline-block;
    height:40px;
    width:40px;
    border:1px solid black;
}

.clicked .img{
    opacity:0.3;
}

.clicked .img.selected{
    opacity:1;
    background:red;
}

JS


$('.img').on('click', function() {
    $('.img').removeClass('selected');
    $(this).addClass('selected');
    $('.container').addClass('clicked');
})

HTML

<div class="container">
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
</div>

http://jsfiddle.net/renekoch/y6YCc/

点击即可更改多个图像

1 个答案: