鼠标悬停和鼠标移开一直闪烁并触发

Question

我有列，我想在我的鼠标经过图像时显示图像，但是，当我在同一图像上移动时，mouseover 和 mouseout 一直触发。所以图像一直在闪烁。我该如何解决？

我过滤了图像 class（媒体覆盖）以更改其显示

这是我的例子 https://jsfiddle.net/saltykiam/bw4ap70v/5/

let row = document.getElementById("row");

    row.onmouseover =(e)=>{    
    [...e.path].filter(element => 
      element.classList && element.classList.contains("media-overlay"))[0].style.display = "none";
    }
    
    row.onmouseout =(e)=>{    
    
    [...e.path].filter(element => 
      element.classList && element.classList.contains("media-overlay"))[0].style.display = "block";
    
    }

Answer 1

问题是当您调用 'onmouseover' 事件时，图像被设置为

display: none;

这实际上是从页面中删除图像，所以现在当您将鼠标移动到任何地方时，您实际上是在调用“onmouseout”事件。这是因为图像不再在页面上，没有物理尺寸，因此鼠标的任何移动都被视为将鼠标移出图像。

要解决此问题，请针对 opacity 而不是 display 应用样式更改。当您希望图像消失时，将不透明度设置为 0：

row.onmouseover = (e) => {
  [...e.path].filter(element =>
    element.classList && element.classList.contains("media-overlay"))[0].style.opacity = 0;}

并在您希望图像重新出现时将不透明度设置为 1：

row.onmouseout = (e) => {
  [...e.path].filter(element =>
    element.classList && element.classList.contains("media-overlay"))[0].style.opacity = 1;}

鼠标悬停和鼠标移开一直闪烁并触发

Onmouseover and mouseout keeps blinking & firing

html

javascript

onmouseover

onmouseout