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

Question

How can I apply transition only on the links which have images instead of text. For example only in the second link:

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

The following CSS will apply transition on all links:

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

a:hover{
    opacity:0.1;
}

I've tried this and doesnt work.

a:hover img{
    opacity:0.1;
}

Here's jsfiddle: http://jsfiddle.net/wg5b3/

Answer 1

You cannot select a parent element via css. But you really can style the image directly, ie

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

You may try this as well:

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>