时间戳

首页 > 解决方案 > 如何阻止事件定位？

javascript - 如何阻止事件定位？

问题描述

我有一堆网格，其中有一个名为“grid-show”的类。我想为鼠标悬停的特定元素设置样式（不使用 CSS 中的 .hover 属性），但是当鼠标未悬停时，我希望它停止并恢复正常。我的例子中的“else if”并没有做到这一点。

  let divShow = document.querySelectorAll('.grid-show');

  for(i = 0; i < divShow.length; i++){
    divShow[i].addEventListener('mouseover', function(eve){

      if (eve.target) {
        eve.target.style.color = "orange"
      } else if(!eve.target){
        eve.target.style.color = " ";
      }

    })
  }

标签： javascript

解决方案

使用基于 CSS 的解决方案会更优雅，但如果您仍想以编程方式执行此操作，您可以使用“mouseout”事件来删除样式：

let divShow = document.querySelectorAll('.grid-show');

for(i = 0; i < divShow.length; i++){
  divShow[i].addEventListener('mouseover', function(event){
    event.target.style.color = "orange"
  })

  divShow[i].addEventListener('mouseout', function(event){
    event.target.style.color = "";
  })
}

推荐阅读