IE 8 指定背景颜色更改元素行为答案

【问题标题】：IE 8 specifying background-color changes element behaviorIE 8 指定背景颜色更改元素行为
【发布时间】：2011-06-17 16:33:01
【问题描述】：

我有一个绝对定位的 div，我试图在其上触发 mouseenter 和 mouseleave 事件。在 IE8/7 中，未指定 div 的背景颜色（因此默认为透明），当光标越过 div 的边界时，mouseenter/leave 事件不会触发，仅在 div 中间的某个位置并且当光标位于 div 内的任何文本上。

当我尝试通过向 div 添加背景颜色（例如背景颜色：绿色）来调试问题时，问题神奇地消失了。 div 的 box 模型得到了完美的体现，mouseenter/leave 火如预期。只有当 div 的背景颜色未指定（或什至明确设置为透明）时，它的行为才会正确。

有什么想法吗？谷歌搜索这个 IE 错误/怪癖一无所获。

【问题讨论】：

这是我过去已经遇到过的 IE 中的一个错误。如果一个元素是 100% 透明的，那么 IE 不会将其视为鼠标事件。

标签： javascript css internet-explorer

【解决方案1】：

在光标碰到可见的东西之前，mouseenter 和 mouseleave 不会注册。这不是正确的行为，但这是我们正在处理的 Explorer。

两种可能的解决方案：

~~在 DIV 上放一个细边框，与它后面的任何东西相匹配，不会被注意到。~~ （这不起作用；请参阅 cmets。）
跟踪 mousemove 事件并让您的代码确定鼠标何时进入感兴趣的区域。
（已添加；参见 cmets。） 将背景设为平铺的透明 1x1 图像。

不幸的是，这两种解决方案都非常糟糕。

编辑：问题：mouseover 和 mouseout 是否显示相同的奇怪行为？

【讨论】：

感谢您的洞察力。是的，mouseover/mouseout 显示相同的行为。添加边框也不能修复它（即使是清晰可见的边框）。光标越过边界并移向 div 中间后，mouseleave 再次触发。
您的意思是说，只要您点击元素在内的透明度，mouseleave 就会触发？哇，真的坏掉了。将 1x1 透明图像平铺作为背景怎么样，这也会破坏吗？我知道，它越来越恶心了。
你，我的朋友，成功了。透明图像背景做到了。我会给你一个机会来编辑你的答案，这样它就不会在我自己这样做之前被埋没在 cmets 中。（要回答您的第一个问题，是的，mouseleave 在元素内触发）

【解决方案2】：

补充一点：在上面的答案中，使用解决方案 3 时也会触发 onclick。总体而言，这是一个很好的解决方法，可以在 IE 中抓取透明元素而不是非透明元素的点击。

【讨论】：