图像翻转效果文本在同一 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;，然后尝试。