html - 当悬停时填充扩展时，div 向下移动

Question

我有两个 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) 当我移开鼠标(即:悬停结束)时，您可以看到随着背景(红色)逐渐消失，文本已经丢失了填充和边框半径。

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

Answer 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>

基于问题编辑，更新了第二个示例，我在 a:link 规则中添加了 padding: 0 5px 以补偿悬停的填充

#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>