CSS Hover Option - html

Question

I learn and use css and css3 around 2 years but i dont know 1 thing and i cant find a really good answer or fix for this.
So here is an example :
I created a div and inside this div we have a link (its a button).
When i hover my mouse on the div this div will change the bg-color but the link not because im above the div... So when im above the div this div and the link too will change the color or background this is what i need... But how to do it ? I never used this but now i think i'll need this for my next work :))
Thank you very much!

Answer 1

It's very easy to achieve using css: (working jsFiddle)
HTML:
<div class="container">
<a class="button">some text</a>
</div>
CSS:
.container:hover{
background-color:red;
}
.container:hover .button{ // selector for .button which is in a hovered .container
background-color:blue;
}

Answer 2

Try this:
<div id="test">
A link
</div>
CSS :
div#test:hover {
background-color: red;
}
div#test:hover a {
background-color: red;
}

Answer 3

What you're asking is the following CSS selector:
div:hover a{
/* your styles here */
}
Demo here

Answer 4

Hope this demo link will work for you.
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
.wrapper {
width:95%;
padding:10px;
overflow:hidden;
height:100%;
margin:0 auto;
border:1px solid green;
}
.spacer {
clear:both;
font-size:0;
line-height:0;
height:0;
}
.wrapper:hover {
background-color:#999999;
cursor:pointer;
}
.btmoOne {
width:170px;
margin:0 auto;
height:20px;
background-color:#FF0000;
padding:10px;
}
.wrapper:hover .btmoOne {
background-color:#006600;
}