0

如何仅在具有图像而不是文本的链接上应用过渡。例如仅在第二个链接中：

<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{   
    -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 回答
0 
a img:hover {
    opacity:0.1;
}
于 2012-07-12T19:37:53.387 回答