需要帮助，使用悬停伪元素

Question

需要帮助，使用悬停伪元素时，我不知道为什么当我将鼠标悬停在 div 上时，它只能在其中一半起作用，而另一半则不起作用，这里是我的代码：

.box {
  width: 200px;
  height: 200px;
  background: red;
}

.box:hover {
  background:blue;
  width:100px;
  height: 100px;
}

<div class="box"></div>

Answer 1

浏览器正在防止“快速闪烁”，因为悬停会改变大小，这会自动使元素失去悬停状态。如果您将

transition: all 0.5s ease;

添加到 .box 规则中，您会看到它现在接受所有位置的悬停，但它会快速进入和退出悬停状态。

我不确定您的代码的用例（您想要实现的目标），如果您想要稳定的悬停，并保留 200x200px 大小，您可以使用伪元素来设置背景以更改大小，或使用单色渐变并调整背景大小，您可以在以下位置看到最后的解决方法：https://jsbin.com/yirifap/edit?html,css,output（我概述了该元素，以便您仍然可以看到元素大小）