分别使用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 {

- ＆GT;

#gallary img:hover {

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