为什么在 div 上添加 mouseover 效果即使在 mouseout 之后效果仍然存在？答案

【问题标题】：Why added mouseover effect on div the effect persist even after mouseout?为什么在 div 上添加 mouseover 效果即使在 mouseout 之后效果仍然存在？
【发布时间】：2021-02-06 10:16:09
【问题描述】：

我的意思是如何在鼠标移出时保留实际的上一课？

function highlight( x, y) {

  var sel=document.getElementById(y);

  sel.style.borderBottom= "2px solid "+x;
  sel.style.opacity="1";
  sel.style.transition="all ease-in .1s"

}

即使鼠标移出，过渡仍然存在，我需要鼠标移出时的旧 CSS 类。

【问题讨论】：

调用函数onMouseOver并不意味着反函数会发生onMouseOut。要恢复之前的状态，只需在 onMouseOver 上创建一个临时副本，然后将其设置回 onMouseOut。

标签： javascript css dom-events javascript-objects

【解决方案1】：

您实际上是在为您的元素设置样式“永远”：sel.style.opacity = 1。尝试向您的元素添加一些 CSS 悬停逻辑，例如：

CSS：

.box {
  background-color: red;
}

.box:hover {
  background-color: green;
  cursor: pointer;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

HTML：

<div class='box'>Your element</div>

【讨论】：