我想使用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/
答案 0 :(得分:6)
#gallary:hover img {
- &GT;
#gallary img:hover {
您当前的定义会更改整个“gallary”容器的不透明度,因此会更改所有图像。