浏览器事件：当您使元素可见（并且鼠标在其上）时，不会发生鼠标悬停]]

Posted 2021-03-28

所以当您使元素可见并且问题是如何“触发”时，Mouseover不会发生？

但是！这取决于浏览器以及我无法捕获的其他详细信息：

例如检查此SO代码段或Codepen https://codepen.io/rpokrovskij/pen/GRRamJe。您将需要移动鼠标以触发“鼠标悬停”。

但是如果我重复此操作，则在CHROME浏览器中将html写入本地文件中，则会触发mouseover，但不会在IE11或Edge中触发。

实际上，当在元素上可见时，我观察到3个变体：

1. 发生鼠标悬停（Chrome，本地文件）
2. 鼠标在元素内移动时会发生鼠标悬停（Chrome浏览器带有SO代码段，codepen）
3. 鼠标悬停根本不会发生（鼠标应该离开并返回到元素-仅然后-IE11，Edge和本地文件）

[更广泛的问题是“如何使依赖于元素mouseover的代码标准化”？

P.S。那里的标准行为是什么？

var typeMeInput = document.getElementById("typeMe");
var showMeDiv   = document.getElementById("showMe");

typeMeInput.addEventListener('input',
   function(){
      showMeDiv.style.display="block";   
   }
)
   
for(var i =1; i<=5; i++ )
{
   var itemX= document.getElementById("item"+i);
   (function(itemX,i){ 
     itemX.addEventListener('mouseover',
      function(){
         console.log("mouseover happen "+i);   
      }
     )})(itemX, i)
}
1 put focus<br/>
2 move mouse pointer to yellow area, <br/>
3 and type any char <br/>

<input id="typeMe" style="width:100px;"  />

<div style="background-color: yellow; width:100px; height:100px;">
  <div id="showMe" 
    style="background-color: red; position: absolute; z-index: 1; display:none;">
    <div id="item1"><div style="width:100px;">item 1</div></div>
    <div id="item2"><div style="width:100px;">item 2</div></div>
    <div id="item3"><div style="width:100px;">item 3</div></div>
    <div id="item4"><div style="width:100px;">item 4</div></div>
    <div id="item5"><div style="width:100px;">item 5</div></div>
  </div>

</div>

所以当您使元素可见时，Mouseover不会发生，而问题是如何“触发”它？但！这取决于浏览器以及我无法捕获的其他详细信息：例如，检查此SO代码段或...

答案

对于onmouseover，IE似乎是个小故障。