悬停时填充扩展时，Divs 向下移动答案

【问题标题】：Divs move downwards when padding expands on hover悬停时填充扩展时，Divs 向下移动
【发布时间】：2016-11-07 19:37:50
【问题描述】：

我有两个 div，当一个悬停在 div 的文本（链接）上时，填充从 0 增加到 5px。我的问题是，每当我将鼠标悬停在文本上并且填充增加时，div 就会向下移动。代码如下：

<div id="container" class="text1">
<a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>

<div id="container" class="text2">
<a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>


#container {
position:relative;
}


a:link, a:visited, a:active {
color:blue;
}


a:hover {
color:yellow;
}


.text1box {
left:200px;
bottom:35px;
width:243px;
}


#text1style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}


#text1style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}


.text2 {
left:455px;
bottom:57px;
width:90px;
}


#text2style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}


#text2style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}

更新的代码：我已将填充扩展应用于各个链接，而不是 div，这有所帮助。我还有两个问题：1）（链接的）文本仍然略微向右移动。 2）当我移开鼠标（即：悬停结束）时，您可以看到随着背景（红色）逐渐消失，文本丢失了填充和边框半径。

我该如何解决这两个问题？非常感谢。

【问题讨论】：

一个 ID 只能使用一次，但是你可以通过 class="class1name class2name" 拥有多个类
@HarrisJT 请查看更新的代码以获得替代解决方案。

标签： html css hover

【解决方案1】：

您可以通过向上移动 2 个框来补偿向下移动它们的填充。

而id 应该是唯一的

.container {
  position: relative;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
  -webkit-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  transition: background-color 0.5s;
  background-color: red;
  text-align: center;
}
.box1 {
  left: 200px;
  /*bottom: 35px;*/
  width: 221px;
  border-radius: 10px;
}
.box2 {
  left: 455px;
  /*bottom: 57px;*/
  width: 66px;
  border-radius: 10px;
}
a:link,
a:visited,
a:active {
  color: blue;
}
a:hover {
  color: yellow;
}
.container:hover {
  top: -5px;
  padding: 5px 0;
  background-color: dodgerblue;
}
.container.box1:hover + .box2 {
  top: -10px;
}

<div id="container1" class="container box1">
  <a href="#" style="font-size:120%;
text-decoration:none;">Some text</a>
</div>

<div id="container2" class="container box2">
  <a href="#" style="font-size:120%;
text-decoration:none;">text</a>
</div>

基于问题编辑，更新了 2:nd 示例，我将 padding: 0 5px 添加到 a:link 规则以补偿悬停的填充

#container1, #container2 {
  position: relative;
}
a:link,
a:visited,
a:active {
  color: blue;
  padding: 0 5px;
}
a:hover {
  color: yellow;
}
.text1box {
  left: 200px;
  bottom: 35px;
  width: 243px;
}
#text1style {
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
  -webkit-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
#text1style:hover {
  padding: 5px;
  border-radius: 10px;
  background-color: red;
}
.text2 {
  left: 455px;
  bottom: 57px;
  width: 90px;
}
#text2style {
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
  -webkit-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
#text2style:hover {
  padding: 5px;
  border-radius: 10px;
  background-color: red;
}

<div id="container1" class="text1">
  <a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>

<div id="container2" class="text2">
  <a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>

【讨论】：

所有这一切都是破坏我的链接。一旦我将鼠标悬停在它上面，它就会迅速上下跳跃。这两个 div 彼此相邻，并排。请再次查看我的代码。
@H3ll0 更新了我的答案。去掉了bottom 临时的，因为它们使盒子在演示中消失了，仍然是top: -5px 弥补了悬停时添加的填充，因此防止它们向下移动
您的演示显示文本向右移动。我希望文本完全居中，填充是唯一的扩展。请查看我将在稍后添加的更新代码。
@H3ll0 再次更新，文字一直居中
请看我更新的代码。如果您可以使用我应用的这种不同方法做同样的事情，那应该会有所帮助。我已将 css 添加到为 div 中的链接创建的 id 中，而不是将转换应用于 div 本身。正如更新后的帖子中所解释的，我现在遇到了右移问题和淡入淡出问题。非常感谢您在这些新条件下的意见，谢谢。

【解决方案2】：

我为你创建了一个 jsfiddle：

https://jsfiddle.net/squeLsa6/

<div id="" class="box1 container">
<a href="#" style="font-size:120%;text-decoration:none;">Some text</a>
</div>

<div id="" class="box2 container">
<a href="#" style="font-size:120%;text-decoration:none;">text</a>
</div>


<style type="text/css">
.container {
position:relative;
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
padding:5px;
}


a:link, a:visited, a:active {
color:blue;
padding:5px;
}


a:hover {
color:yellow;
padding:5px;
}


.box1 {
left:200px;
bottom:35px;
width:221px;
border-radius:10px;
}


.box2 {
left:455px;
bottom:57px;
width:66px;
border-radius:10px;
}


.container:hover {

background-color:dodgerblue;
}
</style>

基本上我将填充从悬停状态移动到 a 和容器。我还将容器转换为一个类，因为 id 应该是唯一的。我不确定您希望它如何工作，因此您可能需要稍微尝试一下，但这应该可以帮助您入门。

【讨论】：

我将它应用于链接，但现在每次我悬停时它们都会向右移动。

【解决方案3】：

首先，您将 id 与类混淆了。我用 CLASS 更改了名称 ID，它可以工作；在 Css 中，类有“.”。并且 ID 有“#”，请注意这一点。当我将鼠标悬停在 div 上时，它需要 5px 的填充，并且由于填充，另一个 div 会轻微移动是很自然的。如果您不想移动框，则必须在 padding-bottom 之外的任何地方提供填充。

【讨论】：

我要用类替换哪些 ID？