将鼠标悬停在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;
}