javascript - 使用 javascript 和 less css 调试 onMouseOver 和 onMouseOut

Question

我在这里遇到了一些问题，发现我的错误。调试控制台说：“找不到变量：mouseover/mouseout。” 我不知道她想对我说什么。我想通过 onmouseover/onmouseout 事件将具有 lessCss 的 div 淡化为 50% 的透明度。

<div id="right" class="" onMouseOver="javascript: mouseover(this);" onMouseOut="javascript: mouseout(this);"></div>

<script type="text/javascript">
  function mouseover(this) {
    this.setAttribute("class", "mouseover");
  }

  function mouseout(this) {
    this.setAttribute("class", "");
  }
</script>

少CSS代码：

#right {
  position:fixed;
  top:320px;
  right:0px;
  z-index:5;
  height:200px;
  width:30px;
  background-image: url(images/right);
  border-radius:5px;
  background-color:fade(darken(@bg-color, 50%),50%);
  cursor:pointer;
}
.mouseover {
  background-color:darken(@bg-color, 50%);
}

Answer 1

您不需要 javascript 函数，使用 CSS 选择器“悬停”：

#right {
position:fixed;
top:320px;
right:0px;
z-index:5;
height:200px;
width:30px;
background-image: url(images/right);
border-radius:5px;
background-color:fade(darken(@bg-color, 50%),50%);
cursor:pointer;
}
#right:hover {
background-color:darken(@bg-color, 50%);
}

您的 div 只需将“正确”作为 id：

<div id="right"></div>