CSS：在悬停时向按钮添加边框。如何避免移动以下元素？

Question

我的想法是在用户将其悬停时为提交按钮添加彩色边框。

＆＃13;

＆＃13;

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

＆＃13;

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

但紧随其后的文字会向下移动。

我怎样才能摆脱这些＆＃34;跳跃＆＃34;文本同时有边框？

Answer 1

默认情况下，您需要在button上定义透明边框，并在悬停时更改border-color。进一步避免在悬停时更改font-weight属性，同时它还会扩展按钮的宽度和高度，它会在悬停时跳转。

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border: 6px solid transparent;
  font-weight: 800;
  border-radius: 4px;
  padding: 5px 10px;
}

button:hover {
  border-color: crimson;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

Answer 2

将“margin”属性添加到“按钮”CSS中，如下所示：

long sum = std::accumulate(begin, end, long{0});

来自Stop an element moving with padding on hover。

Answer 3

以下是一些可能性：

1. 使用相同的px / em值设置按钮尺寸（填充/边距/边框）的样式：hover state
2. 将按钮位置设置为绝对/固定
3. 在父div中使用修复高度

Answer 4

只是为了提供替代方案，您可以使用outline在悬停时设置“边框”。

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}
button {
  border: 0;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 5px 0;
}
button:hover {
  outline: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

另一种选择：

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}
button {
  border-radius: 4px;
  padding: 5px 10px;
  margin: 6px 0;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
}
button:hover {
  border-width: 6px;
  border-style: solid;
  border-color: crimson;
  font-weight: 800;
  margin: 2px 0;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

Answer 5

立即检查

＆＃13;

＆＃13;

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
 border: 6px solid transparent;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

＆＃13;

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

尝试将height添加到按钮

＆＃13;

＆＃13;

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
   border-radius: 4px;
   padding: 5px 10px;
   height:40px
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

＆＃13;

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 7

提到按钮的宽度和高度，并删除字体粗细以避免在悬停元素时移动元素。检查以下代码。

＆＃13;

＆＃13;

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
  height:50px;
  width:100px;
}

button:hover {
   /*font-weight: 800;
  background-color: white;*/
  border: 6px solid crimson;
  color: crimson;
}

＆＃13;

<div class="container">
  <button>SUBMIT</button>
  
  <div>Please notice that ...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
  height:50px;
  width:100px;
}

button:hover {
  border: 6px solid crimson;
  background-color: white;
  color: crimson;
}

＆＃13;

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 8

将与边框大小相同的填充添加到按钮，并在悬停时将其删除。