css - 分别为每个图像使用 css3 过渡制作不透明度

Question

我想使用 CSS3 转换分别更改每个图像的鼠标悬停不透明度。

这是代码：

<div id="gallary">
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
</div>

这是CSS：

#gallary img{
    opacity:1;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in;
}

#gallary:hover img{
    opacity:.5;
}

选择器适用于 id 为“gallary”的 div 内的所有图像。如何在鼠标悬停时分别更改每个图像的不透明度？

这是一个示例：http: //jsfiddle.net/TJeHX/

Answer 1

#gallary:hover img {

->

#gallary img:hover {

您当前的定义更改了整个“图库”容器的不透明度，因此更改了所有图像。