Mouseover，Mouseout事件未在IE中启动

Mouseover ,Mouseout event not firing in IE

本文关键字：IE 启动 Mouseout 事件 Mouseover      更新时间：2023-09-26

嗨，我有下面的html布局

 <div id="stripe_container" style="top: 0px; border: 1px solid rgb(235, 116, 41);  
background: none repeat scroll 0% 0% rgb(243, 232, 151); position: fixed; height: 30px;  
width: 100%; left: 0px; z-index: 99999999; font-size: 14px; font-family: Verdana;   
cursor: pointer;" class="">
  <div id="stripe_rollover" style="height: 30px; background-color: transparent; z-index:  
    99999999; left: 0px; width: 97%; position: fixed;"></div>
   <div id="stripe_text_left" style="margin-top: 5px; margin-left: 15px; color: black;  
    float: left;">Text Test</div>
   <div id="stripe_text_right" style="top: 4px; right: 40px; cursor: pointer; position:  
   absolute; float: right;">Mouseover</div>

下面是我的js代码

  <script>
  var x;
stripe_rollover.onmouseover=function(){
   x=document.createElement('div');
   x.style.height='30px';
   x.style.width='40px';
   x.style.backgroundColor='#000000';
   var stripe_container=document.getElementById('stripe_container');
   stripe_container.parentNode.insertBefore(x,stripe_container.nextSibling);

}

stripe_rollover.onmouseout=function(){
   x.parentNode.removeChild(x); 
}

我在IE浏览器中遇到了一个问题。IE 8,9甚至10。当我将鼠标悬停在strip-div上时，将触发mouseover事件，但当光标移动到mouseover文本上时，不会触发该事件。

这将解决您的问题（示例）

function mouseOver_handler(){
    // ...
}
function mouseOut_handler(){
    // ...
}
stripe_rollover.onmouseover = mouseOver_handler;
stripe_text_left.onmouseover = mouseOver_handler
stripe_text_right.onmouseover = mouseOver_handler;
stripe_rollover.onmouseout = mouseOut_handler;
stripe_text_left.onmouseout = mouseOut_handler
stripe_text_right.onmouseout = mouseOut_handler;
相关文章：