javascript - 如何停止指定事件？(How can i stop a event from targeting?)

Question

I have a bunch of grids with a class called "grid-show".(我有一堆名为“ grid-show”的网格。)

I want to style this specific element that my mouse is over (without using the .hover property in CSS), but when the mouse is not over, I want it to stop and goes back to normal.(我想设置鼠标悬停时的特定元素的样式（不使用CSS中的.hover属性），但是当鼠标悬停时，我希望它停止并恢复正常。) The "else if" in my example doesent manage to do that.(在我的示例中，“ 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 = " "; } }) }   ask by Mr.Ulis translate from so

Answer 1

Using a CSS based solution would be more elegant, but if you still want to do it programmatically, you could use the "mouseout" event to remove the style:(使用基于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 = ""; }) }