0

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/

4

1 に答える 1

6 
#gallary:hover img {

->

#gallary img:hover {

現在の定義は、「ギャラリー」コンテナ全体の不透明度を変更するため、すべての画像に対して変更されます。

于 2012-08-03T20:57:50.873 に答える