将鼠标悬停在div上时显示文本修饰

Question

我想知道如何在链接整个div时将链接变为蓝色，而不仅仅是链接本身。这是可能的只是HTML & CSS？

举个例子：如果我有（jsfidde），如果你只是徘徊在灰色而不是实际的链接上，我会如何让链接变成蓝色？

<style> 
    #parent { 
     background-color: gray; 
     height: 100px; 
     width: 200px; 
    } 
    #parent img { 
     margin: auto; 
     line-height: 90px; 
    } 
    #caption a { 
     text-decoration: none; 
     color: black; 
    } 
    #caption a:hover { 
     color: blue; 
    } 
</style> 
<div id="parent"> 
    <img src="http://www.cedexis.com/images/icons/32-social.png?1389641973" /> 
    <div id="caption"> <a href="jsfiddle.net">This is a caption</a> 

    </div> 
</div> 

Answer 1

#parent:hover a 
{ 
    color: blue; 
} 

Answer 2

DEMO

#parent:hover #caption a { 
    color:blue; 
} 

Answer 3

像这样：http://jsfiddle.net/techsin/7MLSb/2/

#parent:hover a { 
    color: blue; 
} 

当父徘徊交上他们全部的蓝色。

Answer 4

使用此

#parent:hover #caption a { 
    color: blue; 
} 

取而代之的是

#caption a:hover { 
    color: blue; 
}