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：好的，这是非常奇怪的事情。似乎最右边的任何元素都没有这个问题。说真的，最右边的论坛标签和下一个按钮都有：悬停元素，它们完全按照我的要求工作。

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>

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

3 个答案: