0

テキストではなく画像を含むリンクにのみトランジションを適用するにはどうすればよいですか。たとえば、2番目のリンクでのみ：

<a href="#">no image</a>
<a href="#"><img src="http://i.qkme.me/35rb4r.jpg"></a>

次のCSSは、すべてのリンクに遷移を適用します。

a{   
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

a:hover{
    opacity:0.1;
}

私はこれを試しましたが、機能しません。

a:hover img{
    opacity:0.1;
}

これがjsfiddleです：http：//jsfiddle.net/wg5b3/

4

4 に答える 4

1

cssを介して親要素を選択することはできません。しかし、実際には画像を直接スタイリングすることができます。

a > img {transition: opacity 0.5s;}
a > img:hover {opacity 0.1;}
于 2012-07-12T19:39:47.310 に答える
1 
a > img:hover{
    opacity:0.1;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s; 
}
于 2012-07-12T19:42:29.353 に答える
0 
a img:hover {
    opacity:0.1;
}
于 2012-07-12T19:37:53.387 に答える
0

これも試すことができます：

a{   
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}

a:hover #hello{
    opacity:0.1;
}

<a href="#">no image</a>
<a href="#" id="hello" ><img src="http://i.qkme.me/35rb4r.jpg"></a>
于 2012-07-13T11:55:41.347 に答える