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

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 {

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