鼠标悬停事件不会在IE9上造成子元素，事件不会在IE8上启动 [英] Mouseover event doesn't granulate on IE9 for sub elements, event doesn't start on IE8
问题描述
我们正在调整此处发布的方法突出显示一个鼠标悬停的DOM元素，如检查确实到不使用jQuery 。
We were adapting a method posted here highlight a DOM element on mouse over, like inspect does to NOT use jQuery.
我们想出了这个解决方案到目前为止： http://jsfiddle.net/pentium10/Q7ZQV/3/
We came up with this solution so far: http://jsfiddle.net/pentium10/Q7ZQV/3/
这个接缝可以在Chrome和Firefox上工作，但在IE上无法正常工作。
This seams to work on Chrome and Firefox, but doesn't work as expected on IE.
-
在IE9上，例如，像标记行这样的次要元素不会出现突出显示，例如：
javascript，html，dom或顶行如下：chat，meta，faq
当我将鼠标悬停在JavaScript标签上时，大div被高估，这是错误，它应该是就像我们在Firefox中看到的那样
When I mouse over the javascript tag the big div is highligthed and this is wrong and it should be like we see in Firefox
在IE8和7上，它不会启动，这是另一个我们需要解决的问题/ p>
On IE8 and 7 it doesn't start, so that is another problem we need to fix
推荐答案
事实证明，在IE中，没有背景的元素 background：transparent ）和渐变过滤器设置不接收鼠标事件。 演示
It turns out that in IE, elements that have no background (i.e. background: transparent) and the Gradient filter set do not receive mouse events. Demo
这是一个快乐的巧合，因为您为覆盖层使用 RGBa背景颜色，而且其中一种解决方法IE中的RGBa颜色是渐变过滤器。
This is a happy coincidence, since you're using a RGBa background colour for your overlay and one of the workarounds for RGBa colours in IE is the Gradient filter.
通过在叠加层上设置这些样式（对于IE）：
By setting these styles on the overlay (for IE):
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */
zoom: 1;
鼠标事件通过覆盖层和底层元素，因此内部/次要元素正确突出显示。
mouse events pass through the overlay and onto the underlying elements, so inner / minor elements are highlighted correctly.
IE7 / 8中存在的其他问题：
Other issues that are present in IE7/8:
-
当使用
element.attachEvent，事件名称需要以on为前缀：
When using
element.attachEvent, the event name needs to be prefixed with "on":
document.body.attachEvent('onmouseover', function(e) { ... })
要查找事件的目标，您需要访问 event.srcElement 而不是 event.target 。
To find the target of the event, you need to access event.srcElement instead of event.target.
正如rodneyrehm所说， Array。 indexOf 不支持。
As rodneyrehm mentioned, Array.indexOf isn't supported.
所以这里的一个版本的解决方案也可以在IE 7-9： http://jsfiddle.net/jefferyto/Q7ZQV/7/
So here's a version of your solution that also works in IE 7-9: http://jsfiddle.net/jefferyto/Q7ZQV/7/
（BTW突出显示错误跨越多行的内联元素，例如在浏览其他问题...行中的问自己的问题链接。）
(BTW The highlighting is wrong for inline elements that span more than one line, e.g. the "ask your own question" link in the "Browse other questions..." line.)
这篇关于鼠标悬停事件不会在IE9上造成子元素，事件不会在IE8上启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
