JQuery事件mouseenter和mouseleave没有为IE 10触发，解决方法？

Question

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

我发现IE的行为很有趣。

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

在jsfiddle中，这没有被复制。但是如果我添加img元素，它应该是100%可复制的。

可能的解决方法（我现在就测试并更新）：div背景像素必须不透明，否则在指针不再越过边框像素后将立即触发Mouseleave，如果没有边框，则不会触发鼠标输入/Mouseleave。为所有像素1%不透明的div使用png背景图像应该可以做到这一点。也许css不透明度属性（没有任何背景图像但具有纯色背景）也可以工作。

更多信息：

• 我的doctype是

IE 10控制台没有提供任何有用的信息。我开始在脚本的不同部分使用console.log，并得出结论，鼠标输入和Mouseleave不会为IE 10触发，在其他IE版本中不确定。在Chrome和Firefox中工作正常，可能还有Opera。

此代码导致控制台中没有输出（对于IE）。至少应打印“IE测试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

现在，我将尝试使用mouseover模拟mouseenter/mouseleave。但如果代码能像现在这样在IE上工作，那就太好了。

我试图在jsfiddle中只复制代码的相关部分。这次它也适用于IE 10。在这些代码行之前，我什么也没做，也许是我的风格导致了问题。我修改了我的css，使内容div和控件div从一开始就可见，它们的位置和大小在IE 10中是预期的。我最初的hideContent和show Content函数比我在jsfiddle上显示的代码更多，但它们不是问题，因为在我的IE 10中，它们没有被调用，因为之前的console.log（）行没有执行。

jsfiddle上的代码显示了脚本的行为方式。将鼠标移到div上，将显示另一个div，然后将鼠标移出第一个div，内容将再次隐藏。您将看到许多可疑值，如“left:14.321px”。这是因为我的原始代码计算left、top、width和height，并生成未被截断的值，因为我测试的每个浏览器都接受这些值，我只是将它们作为双倍。还有一些是百分比，但在JSFIDLE中，我在所有情况下都使用px，因为我是手动输入它们的。

http://jsfiddle.net/xhzCL/

出于某种原因，此代码适用于IE 10。jquery版本与我使用的相同。我无法在jsfiddle中复制该问题。

更多信息：除了我自己的控制台之外，控制台是清晰的。log（）行。我正在从另一台连接到路由器的机器上运行的http服务器下载我的页面。我记得一个IE安全警察在从intranet加载页面脚本时遇到麻烦。这可能是问题所在吗？

Answer 1

尝试改用此选项

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

Answer 2

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

IE似乎理解当鼠标指针进入元素的可见部分时必须触发鼠标输入，而当鼠标指针离开元素的可见部分时必须触发Mouseleave。如果元素下方没有任何东西（视觉上），但当div下方有东西时情况会发生变化，并且由于div没有内容或背景颜色，可以通过它看到其他元素的像素。添加css属性backed-Color： White和不透明度： 0.0001很容易使IE在这种特定情况下表现得像所有其他浏览器一样，而背景颜色不会变得明显。

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

• 演示再现问题：http://jsfiddle.net/xhzCL/5/

区别在于这两行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正文上时，文本将可见，无论确切位置如何，而在demo 1中，文本仅当指针在边框像素上时才可见，并且当指针靠近div中心时将隐藏（与所有其他浏览器的行为相反）。

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