Question

更新：找到可能的原因，当我确认时，我会将其作为回答发布

我发现IE行为很有趣。

反对我在jsfiddle上发布的示例，我的原始页面在后台显示了一个图像（抱歉省略它，我认为它不相关）。不是作为css背景属性，而是作为img元素，在使用mouseenter / mouseleave事件处理程序的div之前。我不使用z-index属性（我已经确认使用它什么都没改变）我发现在这种情况下（一个img元素后跟绝对定位的div应该在它上面呈现）IE只会触发mouseleave / mouseenter div上可见部分的事件。在我的例子中，我通过向所有div添加（border-style：solid）和相当大的（border-width）来发现这一点。当鼠标指针进入div的边界时IE触发mouseenter，然后当鼠标指针不再位于边框像素上时触发mouseleave，即使它位于div内（可能是因为div是透明的）。如果没有边框（作为我的原始代码）没有mouseenter事件。

在jsfiddle中没有复制。但是如果我添加img元素应该是100％可重复的。

可能的解决方法（我现在将对其进行测试并更新）：div背景像素不能是透明的，否则在指针不再位于边框像素之后将立即触发mouseleave，如果没有边框则没有mouseenter / mouseleave将是被解雇。对于具有所有像素的div，使用png背景图像1％opaque应该可以解决问题。也许css opacity属性（没有任何背景图像但具有纯色背景）也可能有用。

更多信息：

我的doctype是＆lt;！DOCTYPE html＆gt;
我需要背景图片作为img元素，不实用在这种情况下使用css后台属性。

原始问题：

IE 10控制台未提供任何有用信息。我开始在脚本的不同部分使用console.log，得出的结论是，对于IE 10，不会触发mouseenter和mouseleave，在其他IE版本中不确定。在Chrome和Firefox中运行正常，可能还有Opera。

此代码导致控制台中没有输出（对于IE）。它至少应该打印“IE TEST 2”。

console.log("IE TEST 1"); // OK
$(".show_on_mouseenter").mouseenter(function (evt) {
    console.log("IE TEST 2"); // nothing is print
    showContent(this);
});

$(".hide_on_mouseleave").mouseleave(function (evt) {hideContent(this)});

console.log("IE TEST 3"); // OK

现在我将尝试使用鼠标悬停模拟mouseenter / mouseleave。但是如果代码只适用于IE，那就太棒了。

我试图只复制jsfiddle中代码的相关部分。这次它也适用于IE 10。在这些代码行之前，我什么都没做，也许是我的样式导致问题。我修改了我的CSS以使内容div和控制div从开始可见，并且它们的位置和大小在IE 10中是预期的。我原来的hideContent和showContent函数有更多的代码，我在jsfiddle显示但是它们不是问题是因为在我的IE 10中它们没有被调用，因为之前的console.log（）行没有被执行。

jsfiddle上的代码显示了脚本的行为方式。将鼠标移到div上，然后出现另一个div，然后将鼠标移出第一个div，然后再次隐藏内容。你会看到许多可疑的值，比如“left：14.321px”。这是因为我的原始代码计算左，顶部，宽度和高度并且不产生截断值，因为我测试的每个浏览器都接受这些值，我只是让它们加倍。其中一些是百分比，但在jsfiddle中我在所有情况下都使用了px，因为我手动输入它们。

http://jsfiddle.net/xhzCL/

由于某种原因，此代码适用于IE 10.jquery版本与我正在使用的相同。我不能在jsfiddle中复制这个问题。

更多信息：除我自己的console.log（）行外，控制台是清除的。我正在从连接到我的路由器的另一台机器上运行的http服务器下载我的页面。我记得一些关于IE安全警察的事情导致从内部网加载页面脚本的麻烦。可能是这个问题？

Answer 1

除了console.log（）行之外，控制台清除的原因是因为Javascript代码没有任何问题。 css或html没什么问题。问题是IE 10（以及可能是同一浏览器的其他版本）的行为方式。

似乎IE理解当鼠标指针进入元素的可见部分时必须触发mouseenter，当鼠标指针离开可见部分时必须触发mouseleave元素。如果元素下方没有任何东西（视觉上），则不是这种情况，但是当div下面有东西时，事情会发生变化，并且由于div没有内容或背景颜色，因此可以通过它看到其他元素的像素。添加css属性 background-color：white 和 opacity：0.0001 可以使IE在这种特定情况下的行为与所有其他浏览器一样，而不会使背景颜色变得明显。

必须使用IE 10（可能是9个，可能是8个）访问以下链接，因为其他浏览器（Firefox，Chrome，Opera，Safari）无论如何都会触发事件。

演示再现问题：http://jsfiddle.net/xhzCL/5/
演示解决问题：http://jsfiddle.net/xhzCL/6/
更新：通过使用两个内部div，可以有可见的边框，并且仍然具有一致的跨浏览器行为：http://jsfiddle.net/xhzCL/9/

区别在于这两条css线：

background-color: white;
opacity: 0.0001;

或者使用jquery：

$(".show_on_mouseenter").css("background-color", "white").css("opacity", "0.0001");

请注意，建议的解决方案还会隐藏应该触发鼠标事件的div的边框。对OP的需求没问题，对其他情况可能不太好。尝试记住div在demo 1中的位置，然后用鼠标指针去那里，当指针在整个div体上时文本将是可见的，无论究竟是什么，在演示1中，文本只有在指针位于边框的像素上，并且当指针靠近div的中心时将隐藏（与所有其他浏览器的行为相反）。

如果OP从一开始就包含了img元素，其他人就会遇到同样的问题，并找到了类似的解决方案。对不起，我确信img与此无关并将整页代码粘贴到jsfiddle中是不切实际的。

Answer 2

尝试使用此代替

$(".show_on_mouseenter").on("mouseenter", function (evt) {
console.log("IE TEST 2"); // nothing is print
showContent(this);
});

针对IE 10的jQuery事件mouseenter和mouseleave没有解雇，解决方法？

原始问题：

2 个答案: