將鼠標懸停在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

演示

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

Answer 3

像這樣： http : //jsfiddle.net/techsin/7MLSb/2/

#parent:hover a {
    color: blue;
}

當父母懸停時，將其中的所有a變成藍色。

Answer 4

用這個

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

代替這個

#caption a:hover {
    color: blue;
}