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

Question

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

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 类。

标签： javascriptcssdom-eventsjavascript-objects

Answer 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>