css - 悬停仅适用于链接，而不适用于整个 div

Question

我正在设计一个网页，我使用 HTML5 使整个 div 标记成为一个链接。在添加链接之前，当我将鼠标悬停在它上面时，整个 div 会展开。突然间，只有当我将鼠标悬停在文字上时它才会起作用，而不是我创建的框。 HTML 看起来像这样(减去实际链接):

<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>

让它悬停的 CSS 看起来像这样:

.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}

(注意:这不是样式表中的所有代码。我也有一些可爱的颜色。)

我的 CSS 中是否缺少某些东西来使整个东西在悬停时起作用，而不仅仅是文字？我什至不确定要问什么问题才能弄清楚我在这里做了什么。

预计到达时间:我已经在三个不同的浏览器上检查过这个。它在 IE、Firefox 和 Chrome 上有同样的问题。

预计到达时间:没有 :hover 属性的 CSS。

.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}

预计到达时间:好的，这里有一些非常奇怪的东西。似乎最右边的任何元素都没有这个问题。说真的，最右边的论坛选项卡和下一步按钮都有 :hover 元素，它们的工作方式完全符合我的要求。

Answer 1

去掉 <div>完全并设置<a>至 display: block .

您不应该将 block 级元素放入 <a> 中无论如何。