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

时间:2012-08-03 20:56:29

标签: css3 css-transitions

我想使用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/

1 个答案:

答案 0 :(得分:6)

#gallary:hover img {

- &GT;

#gallary img:hover {

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