在悬停时使标签加粗会使容器移动

Question

当我将鼠标悬停在单选按钮的标签上时，我希望它们加粗。但是，这会导致容器更改其宽度。当标签为粗体时，有没有一种方法必须保持相同的容器宽度，这适用于所有主要的最新版本的浏览器？

这是我的 html 代码：

<form>
  <div>
    <b class="group-label">from</b>
    <span class="input-wrapper">
      <input type="radio" id="from-hiragana" name="from" value="true">
      <label for="from-hiragana">
        <span>Hiragana</span>
      </label>
    </span>
    <span class="input-wrapper">
      <input type="radio" id="from-katakana" name="from" value="true">
      <label for="from-katakana">
        <span>Katakana</span>
      </label>
    </span>
    <span class="input-wrapper">
      <input type="radio" id="from-romaji" name="from" value="true">
      <label for="from-romaji">
        <span>Romaji</span>
      </label>
    </span>
  </div>
</form>

这是我的 css 代码：

.input-wrapper {
  margin-right: 30px;
}

.input-wrapper label {
  position: relative;
  cursor: pointer;
}

.input-wrapper label:hover {
  font-weight: bold;
  transition: 0.3s font-weight;
}

.input-wrapper span::before,
.input-wrapper span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.input-wrapper span::hover {
  cursor: pointer;
}
.input-wrapper span::before {
  left: -20px;
  width: 17px;
  height: 17px;
  background-color: white;
  border-radius: 50px;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label span::after {
  left: -17px;
  width: 11px;
  height: 11px;
  border-radius: 10px;
  background-color: #98fbc9;
  transition: left .25s, background-color .25s;
}

.group-label {
  margin-right: 30px;
  text-transform:uppercase;
}

Answer 1

使用文本阴影使文本看起来更粗。参见 jsfiddle

.input-wrapper label:hover {
  /* font-weight: bold; */
  text-shadow:1px 0px 0px black;
  transition: 0.3s text-shadow;
}

Answer 2

您可以将标签位置更改为固定，并在包装纸上扩展您的边距。

.input-wrapper {
  margin-right: 100px;
}

.input-wrapper label {
  position: fixed;
  cursor: pointer;
}

Answer 3

你可以通过使用 text-shadow 来获取它，如下所示

fiddle link

您可以通过 max-width 和 flex 获得，如下所示

CSS 变化

.input-wrapper label:hover {
  /* font-weight: bold; */
  text-shadow:1px 0px 0px #000;
  transition: all 0.3s linear;
}

.input-wrapper {
  margin-right: 30px;
}

.input-wrapper label {
  position: relative;
  cursor: pointer;
}

.input-wrapper label:hover {
  /* font-weight: bold; */
  text-shadow:1px 0px 0px #000;
  transition: all 0.3s linear;
}

.input-wrapper span::before,
.input-wrapper span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.input-wrapper span::hover {
  cursor: pointer;
}
.input-wrapper span::before {
  left: -20px;
  width: 17px;
  height: 17px;
  background-color: white;
  border-radius: 50px;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label span::after {
  left: -17px;
  width: 11px;
  height: 11px;
  border-radius: 10px;
  background-color: #98fbc9;
  transition: left .25s, background-color .25s;
}

.group-label {
  margin-right: 30px;
  text-transform:uppercase;
}

<form>
  <div>
    <b class="group-label">from</b>
    <span class="input-wrapper">
      <input type="radio" id="from-hiragana" name="from" value="true">
      <label for="from-hiragana">
        <span>Hiragana</span>
    </label>
    </span>
    <span class="input-wrapper">
      <input type="radio" id="from-katakana" name="from" value="true">
      <label for="from-katakana">
        <span>Katakana</span>
    </label>
    </span>
    <span class="input-wrapper">
      <input type="radio" id="from-romaji" name="from" value="true">
      <label for="from-romaji">
        <span>Romaji</span>
    </label>
    </span>
  </div>
</form>

在悬停时使标签加粗会使容器移动

Making labels bold on hover makes the container shift

html

css

radio-group