Question

如何仅在具有图像而非文本的链接上应用转换。例如，仅在第二个链接中：

<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/

Answer 1

您无法通过css选择父元素。但你真的可以直接设置图像样式，即

a > img {transition: opacity 0.5s;}
a > img:hover {opacity 0.1;}

Answer 2

a > img:hover{
    opacity:0.1;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s; 
}

Answer 3

a img:hover {
    opacity:0.1;
}

Answer 4

你也可以试试这个：

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>

仅在带图像的链接上进行CSS转换

4 个答案: