CSS 鼠标悬停闪烁问题

Question

我是 CSS 的新手，我遇到了一个问题。当鼠标移到输入框上时，我想让它后面的文字改变颜色。但是当鼠标移到上面时，会出现闪烁。

如何在不更改以下 HTML 结构的情况下解决闪烁问题？

.back:hover {
  color: red;
}

.my-input {
  position: absolute;
  top: 0px;
  opacity: 0.7;
  height: 30px;
}

.my-input:hover {
  pointer-events: none;
}

.my-input:focus {
  opacity: 1;
}

<div>
  <div class="back">
    Some text to be hovered even if input is above
  </div>
  <div>
    <input type="text" class="my-input" />
  </div>
</div>

Answer 1

pointer-events: none 仅在您将鼠标悬停在 .my-input 上时应用，因此该样式与其自身的事件竞争。默认情况下应将此样式应用于元素

.back:hover {
  color: red;
}

.my-input {
  position: absolute;
  top: 0px;
  opacity: 0.7;
  height: 30px;
  pointer-events: none;
}

.my-input:focus {
  opacity: 1;
}

<div>
  <div class="back">
    Some text to be hovered even if input is above
  </div>

  <div>
    <input type="text" class="my-input" />
  </div>
</div>

来自评论： 如果您使用 jQuery，您可以删除 pointer-events: none，以及 :hover 代码，并在为文本着色的同时保持输入难以处理

$('.my-input').on({
  mouseenter: function() {
    $('.back').css('color', 'red');
  },
  mouseleave: function() {
    $('.back').css('color', '');
  }
});

.my-input {
  position: absolute;
  top: 0px;
  opacity: 0.7;
  height: 30px;
}

.my-input:focus {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="back">
    Some text to be hovered even if input is above
  </div>

  <div>
    <input type="text" class="my-input" />
  </div>
</div>

Answer 2

在悬停中，使用 pointer-event: none 是完全相反的。在pointer-event: none的情况下，无法捕获悬停。使用hover时，pointer-event: none有效，破坏hover状态。因此，在鼠标悬停时使用"pointer-event: none"是极其相反和不正确的。

Answer 3

在这里加上我的 2 美分。我有一个 card for Bootstrap 5.1.3 和运行类似的情况。以下对我有用：

.card { 
  transition: all .3s ease; 
}
.card:hover { 
  transform: scale(1.1);
  background-color: yellow;
  opacity: 0.9;
  transition: opacity .3s;
}

使用上面的方法为我解决了 card 悬停时令人讨厌的闪烁问题。

CSS 鼠标悬停闪烁问题

CSS mouse hover flickering issue

html

css

hover

mousehover