Question

我正在建立新的网站，我遇到了一个小问题。当我在div之后添加<a href="about.php">并在div结尾之后添加</a>，但悬停对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 Code

#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是一个块元素，而a标签是一个内联元素。块元素不能进入内联。您需要将<div>更改为<span>或内嵌的内容。

当一个块元素在内联中时，浏览器通常会尝试通过将其移出内联元素来修复它。

如果您需要块元素的效果，请说出上面提到的<span>，您可以在范围中添加display:block。

有关进一步说明，请参阅this post

Answer 2

在你的（a）标签上制作.hover而不是你正在应用它的课程应该可以工作：）

Answer 3

我解决了。我将<a style="display:block" href="about.php"><div class="about"></div></a>更改为<div class="about" onclick="window.location = 'about.php';">

Answer 4

您不希望在ref标记内存储div。你可以给那个ref标签一个类，虽然它会为它设置样式

Div链接和悬停不起作用

4 个答案: