이미지가있는 링크에서만 CSS 전환

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 : 당신은 CSS를 통해 부모 요소를 선택할 수 없습니다 http://jsfiddle.net/wg5b3/

Answer 1

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

Answer 2

a img:hover { 
    opacity:0.1; 
} 

Answer 3

. 하지만 당신은 정말 직접 이미지 스타일을 지정할 수 있습니다 즉

a > img {transition: opacity 0.5s;} 
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>