将鼠标悬停在自定义 CSS 复选框上时添加过渡效果答案

【问题标题】：Adding a transition effect when hovering over a custom CSS checkbox将鼠标悬停在自定义 CSS 复选框上时添加过渡效果
【发布时间】：2021-07-14 16:10:32
【问题描述】：

我有一个自定义 CSS 复选框，如下所示：https://jsfiddle.net/apewjcg9/

不要太担心事物的定位和大小。我的主要问题是在将鼠标悬停在复选框上时处理添加缓入过渡。如您所见，悬停时，我将边框应用于框本身。但是，我想为该边框提供一个小的缓入过渡效果。无论我尝试了什么，似乎都没有应用过渡。

HTML

<input type="checkbox" class="checkbox" id="myCheckbox" />
<label class="checkboxLabel" for="myCheckbox">This is a checkbox label</label>

CSS

.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox + .checkboxLabel::before {
  background-color: white;
  border: 1px solid black;
  border-radius: 2px;
  content: '';
  display: inline-block;
  height: 18px;
  width: 18px;
  font-size: 16.5px;
  text-align: center;
  vertical-align: top;
  margin-right: 5px;
}

.checkbox:checked + .checkboxLabel::before  {
  background-color: firebrick;
  border-radius: 2px;
  color: white;
  content: '\2713';
  font-size: 19px;
  line-height: 18px;
}

.checkboxLabel {
  cursor: pointer;
  display: inline-block;
  margin: 0;
}

.checkbox:hover + .checkboxLabel::before {
  border: 1.5px solid firebrick;
  box-sizing: border-box;
}

我已经尝试将transition: border 1s 添加到.checkbox + .checkboxLabel::before，添加到标签本身，添加到输入中，但没有任何效果可以实现轻松过渡。

【问题讨论】：

标签： css

【解决方案1】：

看起来您在尝试使用 transition: border 1s 时非常接近解决方案，只需稍作调整即可将其移至悬停样式，它应该可以按您的预期工作。

类似下面的东西会转换颜色。您当前拥有的 box-sizing 属性将稍微改变盒子的位置，这可能会有点不和谐 - 如果您希望盒子大小/形状保持不变，您可以将其删除。

.checkbox:hover + .checkboxLabel::before {
  border: 1.5px solid firebrick;
  box-sizing: border-box; <--- removing this will create a smoother transition
  transition: border 0.4s ease;
}

我在过渡期间选择了ease，但here's a guide 可以帮助您决定要进行哪个过渡时间。

【讨论】：

这是我需要的。谢谢你。我还想为后人指出，如果使用彩色背景并将初始边框设置为 0，则在悬停时似乎会在悬停时出现黑色边框，然后过渡到设置的任何颜色。原因在这里解释：stackoverflow.com/questions/42806728/fade-in-border-on-hover/… 所以我需要做的是最初做border: 1.5px solid transparent 而不是border: 0。

【解决方案2】：

您可以使用transition 属性来计算过渡的持续时间，然后使用transform: scale(x) 给它一个缩放效果。

.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox+.checkboxLabel::before {
  background-color: white;
  border: 1px solid black;
  border-radius: 2px;
  content: '';
  display: inline-block;
  height: 18px;
  width: 18px;
  font-size: 16.5px;
  text-align: center;
  vertical-align: top;
  margin-right: 5px;
}

.checkbox:checked+.checkboxLabel::before {
  background-color: firebrick;
  border-radius: 2px;
  color: white;
  content: '\2713';
  font-size: 19px;
  line-height: 18px;
}

.checkboxLabel {
  cursor: pointer;
  display: inline-block;
  margin: 0;
}

.checkbox:hover+.checkboxLabel::before {
  border: 1.5px solid firebrick;
  transition: 0.5s;
  transform: scale(1.1);
}

<input type="checkbox" class="checkbox" id="myCheckbox" />
<label class="checkboxLabel" for="myCheckbox">This is a checkbox label</label>

【讨论】：

【解决方案3】：

您可以尝试更改以使过渡效果清晰可见，然后通过对代码进行这些更改来为 {border-width} 和 {border-color} 添加 {transition} 属性。

.checkbox:hover + .checkboxLabel::before {
      border: 4px solid firebrick;
      box-sizing:border-box;
      transition:
          border-width 0s ease-in 0.25s,
          border-color 0.25s ease-in 0.5s;
      
    }

【讨论】：