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

Question

I was wondering how I could make a link turn blue when they hover over the whole div and not just the link itself. Would this be possible to do with just HTML & CSS?

For an example: If I had ( jsfidde ), how would I make the link turn blue if you just hovered over the gray and not the actual link?

<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

Like this: http://jsfiddle.net/techsin/7MLSb/2/

#parent:hover a {
    color: blue;
}

when parent is hovered turn all a's in them blue.

Answer 4

Use this

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

Instead of this

#caption a:hover {
    color: blue;
}