悬停仅在链接上工作，而不是整个div

Question

我正在设计一个网页，并使用HTML5将整个div标签制作为链接。在添加链接之前，当我将鼠标悬停在整个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上也有同样的问题。

ETA：不带：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;
}

ETA：好的，这很奇怪。似乎最右边的任何元素都没有此问题。认真地说，论坛选项卡和最右边的下一步按钮都具有：hover元素，并且它们的工作方式完全符合我的要求。

Answer 1

完全摆脱<div>并设置<a>为display: block.

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