0

我有 6 张图片。当它们翻滚时，使用 css hover 更改图像。单击图像时，会出现原始图像（再次使用 css），但我希望其余图像在选择一个时变暗。我一直在研究各种 JS 选项，但似乎无法让它工作。有没有人有什么建议？

4

1 回答 1

3

另一种解决方案是向所选图像和图像父级添加一个类。这使得维护更容易，因为样式都是在 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/

于 2012-10-15T20:32:59.890 回答