Hover Issue. HTML and CSS - html

Question

Problem: The idea is the div that changes the colour of its contents on hover. Except the text and image (sprite) colours change at different points; the text on hover above the 'address' div and the image above the 'addressicon' div. Does anyone know how I could I get both to change on hover over the the 'address' div.
HTML:
<section id="gallery">
<div class="container" style="padding-top:40px;">
<div class="address"><div class="title"><span>Address</span></div><br>
<div class="addressicon"></div>
<p><br>Address1<br>
Address2<br>
Address3<br>
Area<br>
City<br>
PostCode
</p>
</div>
<div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div>
<div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div>
</div>
</section>
CSS:
.address {
width:33%;
height:400px;
display:inline-block;
background-color:#CCC;
color:#bcb7af;}
.address:hover {color:#000000;}
.address span {
color:#bcb7af;
align:center;
font-size:24px;
width:100%;}
.address:hover span {
color:#000000;}
.title {text-align:center;}
.addressicon {
background: url(../images/address.png) bottom;
width:202px;
height:130px;
margin: 0px auto;}
.addressicon:hover {
background-position: 0 0;}
Many thanks
Problem Solved New CSS:
.address > .addressicon {
background: url(../images/address.png) bottom;}
.address:hover > .addressicon, {
background-position: 0 0;}

Answer 1

.address:hover > .addressicon {
color: SOMETHING;
}
And never leave a div empty. Put an in it, to prevent it from stupid behaviors.