只悬停在链接上，而不是整个 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 中是否缺少一些东西来使整个东西在悬停时工作而不仅仅是单词？我什至不确定要问什么问题才能弄清楚我在这里做了什么。

ETA：我已经在三种不同的浏览器上检查了这一点。在 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> 中。

Answer 2

似乎在这里工作正常：jsFiddle

我唯一能想到的就是 div 不是你想象的那么大。您在 css 中设置的尺寸和宽度元素仅在鼠标位于 div 上时才有效。如果您希望 div 具有该大小，则还需要将它们设置为正常的非悬停设置。现在它默认为足够大以容纳文本。您可以通过我在示例中添加的黑色边框看到这一点。

这是我的建议：

.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}

我希望我正确理解了您的问题。如果您需要更多说明，请告诉我。祝你好运！

Answer 3

我认为您想在将光标悬停在该 div 上时扩展该 div。 我在下面写了一个代码来解决你的悬停问题。 这是你自定义的代码

.home-tab{
   width:150px;
   height:45px;
   margin-top:30px;
   color:#008080;
   font-family: arial;
   background-color: blue;
   transition-duration: .8s;
   color:white;
   text-align: center;
   font-size: 13pt;
   padding-top: 25px;
}
.home-tab:hover{
    width:200px;
   height:60px;
   font-size: 16pt;
   
    transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>

<a href="#"><div class="home-tab">
    home
</div>
  </a>