html - Div 链接和悬停不起作用

Question

我正在构建新网站，但遇到了一个小问题。当我添加 <a href="about.php">在我的 div 和 </a> 旁边在 div 结束后，但悬停在 div 上不起作用。当我删除 <a href"about.php">和 </a>悬停有效。

这是 HTML 代码:

<div id="centerbox">
    <div class="profile"></div>
        <a style="display:block" href="about.php"><div class="about"></div></a>
     </div>
</div>

这是CSS代码

#centerbox {
    width:988px;
    height:462px;
    margin-top:8.7%;
    margin-right:auto;
    margin-left:auto;
}

.about {
    width: 150px;
    height: 150px;
    display: block;
    margin-left:15.8%;
    margin-top:-150px;
    background:url(/images/about1.png);
    background-repeat:no-repeat;
}

Answer 1

这个问题是div是 block 元素，a标签是行内元素。 block 元素不能进入内联。您需要更改您的 <div>到 <span>或内联的东西。

当 block 元素位于行内时，浏览器通常会尝试通过将其移出行内元素来修复它。

如果你需要 block 元素的效果，比如说 <span>上面提到你可以添加 display:block到跨度。

参见 this post进一步说明