当我将光标悬停在子元素上时，所有父元素都会移动

Question

我有父 div 和四个子 div。父元素是一个容器，子元素是按钮。当我将鼠标悬停在按钮上时，我设置了按钮的 CSS 属性以增加其边框宽度。实际问题是按钮何时增加其边框宽度；整个网页在动。如何让网页稳定？

#theme-options-wrapper {
  display: flex;
  justify-content: center;
}

.theme-button {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: black;
  margin: 5px;
  cursor: pointer;
  border: 2px solid #000000;
  -webkit-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
  -moz-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
  box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
}

.theme-button:hover {
  border-width: 5px;
}

#light-mode {
  background-color: #ffff;
}

#blue-mode {
  background-color: #192734;
}

#green-mode {
  background-color: #78866b;
}

#purple-mode {
  background-color: #7e4c74;
}

<div id="theme-options-wrapper">
  <div data-mode="light" id="light-mode" class="theme-button"></div>
  <div data-mode="green" id="green-mode" class="theme-button"></div>
  <div data-mode="purple" id="purple-mode" class="theme-button"></div>
  <div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>

这里是页面 URL 链接 https://nanthu0123.github.io/portfolio/

按钮的图像（子元素） buttons-img

这里是源代码 https://github.com/nanthu0123/portfolio

Answer 1

嘿，将 box-sizing:border-box; 属性添加到您的 .theme-button 类.

更新：

如果您想让按钮变大，请将 transform: scale(1.3); 添加到您的伪类 (.theme-button:hover)

Answer 2

一种选择是不使用border 来绘制边框，而是使用box-shadow 属性，它可以采用逗号分隔的box-shadow 定义列表；下面我在原始box-shadow的定义之后添加了一个2像素的“假边框”：

box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;

并且，在 :hover 伪类中，将 2 像素大小扩展到 5 像素：

box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;

由于 box-shadow 不占用文档中的空间，它不会强制元素重排（尽管显然需要重新绘制以显示更改的阴影）。

#theme-options-wrapper {
  display: flex;
  justify-content: center;
}

.theme-button {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: black;
  margin: 5px;
  cursor: pointer;
  box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
}

.theme-button:hover {
  box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
}

#light-mode {
  background-color: #ffff;
}

#blue-mode {
  background-color: #192734;
}

#green-mode {
  background-color: #78866b;
}

#purple-mode {
  background-color: #7e4c74;
}

<div id="theme-options-wrapper">
  <div data-mode="light" id="light-mode" class="theme-button"></div>
  <div data-mode="green" id="green-mode" class="theme-button"></div>
  <div data-mode="purple" id="purple-mode" class="theme-button"></div>
  <div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>

这也可以转换/动画 - 颜色，长度或两者 - 如果需要，使用单行：

transition: box-shadow 0.2s linear;

#theme-options-wrapper {
  display: flex;
  justify-content: center;
}

.theme-button {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: black;
  margin: 5px;
  cursor: pointer;
  box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
  transition: box-shadow 0.2s linear;
}

.theme-button:hover {
  box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
}

#light-mode {
  background-color: #ffff;
}

#blue-mode {
  background-color: #192734;
}

#green-mode {
  background-color: #78866b;
}

#purple-mode {
  background-color: #7e4c74;
}

<div id="theme-options-wrapper">
  <div data-mode="light" id="light-mode" class="theme-button"></div>
  <div data-mode="green" id="green-mode" class="theme-button"></div>
  <div data-mode="purple" id="purple-mode" class="theme-button"></div>
  <div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>

参考：

• box-shadow。
• transition。