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

如何仅在包含图像而不是文本的链接上应用转换。例如，仅在第二个链接中：

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

我试过了，但没用

a:hover img{
    opacity:0.1;
}

---

下面是JSFIDLE:

您不能通过css选择父元素。但是你真的可以直接设计图像的样式，即

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

---

您也可以尝试以下方法：

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>

a{
-webkit转换：不透明度0.5s；
-moz转换：不透明度0.5s；
-o-转变：不透明度0.5s；
}
a:哈弗#你好{
不透明度：0.1；
}

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

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

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>