图像翻转效果文本在同一个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>是块级元素。将div置于a元素内是不对的。更改您的代码，例如将div替换为span并提供display: block;，然后尝试。