img rollover影响同一div中的文本

Question

我有一个div，它包含一个img和一个位于它下面的标题。有一个超链接包裹整个div。当我将鼠标悬停在图像上时，如何使文本链接悬停状态显示？以下是目前为止的html：

<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

<a>超链接是一个内联元素。 <div>是块级元素。在a元素中放置div是不对的。更改您的代码，如将div替换为span并给予display: block;，然后尝试。