img rollover affects text in same div

Question

I have a div that houses an img and a title that sits below it. There is a hyperlink that wraps around this entire div. How can I make the text-link hover state show when I hover over the image? Here's the html so far:

<a href="#"><div id="box" class="image-hover">
<img src="images/image.jpg"></img><p class="title">Title goes here</p></div></a>

CSS:
.image-hover a {background-color: white;}
.image-hover a:hover {background-color: navy;}
.image-hover a:active {background-color: navy;}

Answer 1

The <a> hyperlink is an inline element. The <div> is a block level element. It is not right to put a div inside an a element. Change your code like replacing div with span and giving display: block; and then try.