各位复制下面代码，或者下载附件用IE打开就知道了，应用了filter之后 mouseover事件不能正常触发，不知道为什么。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.div{
border:1px solid #3165ac;
width:150px;
height:150px;
float:left;
margin:5px;
}
.div_text{
border:1px solid #3165ac;
width:50px;
height:50px;
float:left;
margin:5px;
}
.bgcolor{
background-color:#999;
}
.opacity40 {/*这个filter 在行内元素无效*/
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);/*#40000000 40表示透明度 不透明为FF 000000表示颜色，此为黑色*/
}
</style>
</head>
<body>
<div id="div_nofilter" class="div">
没有filter（正常触发mouseover）
</div>
<div id="div1" class="div_text"></div>
<div id="div_filter" class="div opacity40">
应用了filter(只在文字和边框触发mouseover)
</div>
<div id="div2" class="div_text opacity40"></div>
<div id="div_filter_bgcolor" class="div opacity40 bgcolor">
应用了filter和背景颜色(正常触发mouseover)
</div>
<div id="div3" class="div_text opacity40 bgcolor"></div>
<script type="text/javascript">
//当div_nofilter触发mouseover事件时 div2文本会自增1
document.getElementById("div_nofilter").onmouseover = function(){
var i = 1;
return function(){
document.getElementById("div1").innerHTML = i++;
}
}();
//当div_filter触发mouseover事件时 div1文本会自增1
document.getElementById("div_filter").onmouseover = function(){
var i = 1;
return function(){
document.getElementById("div2").innerHTML = i++;
}
}();
//当div_nofilter触发mouseover事件时 div2文本会自增1
document.getElementById("div_filter_bgcolor").onmouseover = function(){
var i = 1;
return function(){
document.getElementById("div3").innerHTML = i++;
}
}();
</script>
</body>
</html>
我只知道这现象，哪位高手能告诉我为什么会这样？
相关推荐
此主题深入浅出地介绍了jQuery框架下mouseover事件的基本用法，并通过实例讲解了如何应用此事件来响应鼠标指针滑过元素时的交互行为。现在，我将详细分析该主题所包含的知识点。 首先，mouseover事件是JavaScript和...
本篇文章将详细解析一个基于`mouseover`事件的示例代码，帮助读者深入了解`mouseover`事件的工作原理及其在实际开发中的应用。通过这个示例，我们将学习如何使用JavaScript来响应用户的鼠标操作，并实现动态的内容...
在IE浏览器中，提供了`onmouseleave`和`onmouseenter`事件，这两种事件不会冒泡，适合于替代`mouseover`和`mouseout`的使用。但在需要兼容各大主流浏览器（如Firefox、Chrome、Safari等）的环境下，开发者不能仅仅...
在JavaScript中，mouseover和mouseout事件是常用的事件，它们分别在鼠标指针进入和离开指定元素时触发。在事件处理中，区分鼠标指针是从子元素移入还是从父元素移出对于正确地触发相应的事件非常关键。本文详细探讨...
在JavaScript和jQuery中，`mouseover` 和 `mouseout` 事件是常见的用于响应鼠标进入和离开元素的事件。然而，它们在处理嵌套元素时可能会引发一些问题，导致事件被不期望地多次触发。这是因为当鼠标从一个子元素移动...
asp.net菜单(支持IE6 7 8 9)asp.net菜单(支持IE6 7 8 9)asp.net菜单(支持IE6 7 8 9)asp.net菜单(支持IE6 7 8 9)asp.net菜单(支持IE6 7 8 9)asp.net菜单(支持IE6 7 8 9)asp.net菜单(支持IE6 7 8 9)asp.net菜单(支持IE...
鼠标在移入到td上面之后，在td的相对位置浮动出一个div，基于相对位置。 jQuery的mouseover操作div。 使用jQuery获取鼠标所在元素。
最近在做的在线考试和课程商城都遇到这样的问题：就是鼠标滑过的时候...注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouse
IE使用onmouseover和onmouseout事件，而NETSCAPE使用mouseover和mouseout事件。这两种浏览器的鼠标事件处理机制不同，需要使用不同的方法来处理鼠标事件。 对键盘和鼠标事件的处理是JavaScript编程中不可或缺的一...
总结来说，为非IE浏览器添加`mouseenter`和`mouseleave`事件主要涉及监听`mouseover`和`mouseout`事件，然后通过JavaScript模拟这些事件的行为。这样的实现有助于确保在所有浏览器中提供一致的用户体验，无论用户...
针对标题“JS中mouseover和mouseout多次触发问题如何解决”，主要内容探讨的是在JavaScript中使用jQuery库时，处理mouseover和mouseout事件由于事件冒泡导致的多次触发问题。当用户使用鼠标在页面元素间移动时，这些...
3. Mouseover事件：鼠标指针移到元素上时触发的事件。 4. Mouseout事件：鼠标指针离开元素时触发的事件。 5. Focus事件：元素获得焦点时触发的事件。 6. Blur事件：元素失去焦点时触发的事件。 7. Change事件：元素...
2. `mouseover`和`mouseout`事件：分别在鼠标进入和离开元素时触发，可用于创建悬停效果。 3. `focus`和`blur`事件：元素获得或失去焦点时触发，常用于表单元素。 4. `change`事件：针对表单元素，如输入框、选择框...
标题中的"google鼠标经过JS特效,IE/FF兼容"指的是一个JavaScript实现的特效，它在鼠标悬停（mouseover）某个元素时，会触发一个特定的动画效果，即上部的图片从小到大闪动出现。这个特效适用于谷歌浏览器（Google ...
标题提到的问题是，当鼠标经过子元素时，意外触发了父元素的`mouseout`和`mouseover`事件，从而影响了预期的效果。下面将详细讨论这个问题以及解决方案。 首先，我们需要了解`mouseover`和`mouseout`事件的工作原理...
4. **DOM元素事件**：常见的DOM元素事件包括`click`（点击）、`mouseover`（鼠标悬停）、`mouseout`（鼠标离开）、`keydown`（按键按下）和`keyup`（按键释放）。在飞机大战游戏中，可能用到`mousedown`（鼠标按钮按...