在父元素上使用指针-事件失败:在IE11中悬停

Question

下面是一个小导航结构的片段。如果您悬停蓝色框，一个菜单将显示新的导航选项。

这在除IE11之外的所有主要浏览器中都能工作。在IE11中，当您尝试将菜单悬停时，它将关闭。

问题是以下CSS：

.menu.pointer-events .menu-items
{
    pointer-events: none;
}

.menu.pointer-events:hover .menu-items
{
    pointer-events: initial;
}

当我不使用pointer-events时，一切正常。但我想使用他们，因为菜单往往是烦人的，并正在重新打开它自己。当您在<a>右下角的圆圈中盘旋时，您可以看到这一点。一旦您触摸关闭时向上移动的<ul>，该菜单将“重新打开”本身。

下面是一个演示，当您将链接从左向右悬停时，您应该看到菜单闪烁，并且似乎不知道它们是否应该关闭。

​

.menu
{
    position: relative;
    display: inline-block;
}

.menu > a
{
    background-color: blue;
    color: white;
    display: block;
    padding: 5px;
    text-decoration: none;
}

.menu .menu-items
{
    position: absolute;
    background-color: white;
    padding: 15px;
    display: block;
    margin:0;
    box-shadow: rgba(0,0,0,0.8) 0 4px 10px;
    z-index: 1;
    min-width: 200%;
    
    visibility: hidden;
    opacity: 0;
    top:-100%;
    transition-property: visibility, opacity, top;
    transition-duration: 0.3s;
}

.menu:hover .menu-items,
.menu:focus .menu-items
{
    visibility: visible;
    opacity: 1;
    top: 100%;
}

.menu.pointer-events .menu-items
{
    pointer-events: none;
}

.menu.pointer-events:hover .menu-items,
.menu.pointer-events:focus .menu-items
{
    pointer-events: initial;
}

body
{
    font-size: 14px;
}

<h1>Try to hover these links from forth and back</h1>
<h2>Implementation without pointer events:</h2>
<div class="menu">
    <a href="#">Hover me</a>
    <ul class="menu-items">
        <li>Super</li>
        <li>Duper</li>
        <li>Even more...</li>
    </ul>
</div>
<div class="menu">
    <a href="#">Then Hover me</a>
    <ul class="menu-items">
        <li>Super</li>
        <li>Duper</li>
        <li>Even more...</li>
    </ul>
</div>
<div class="menu">
    <a href="#">And then me Hover me</a>
    <ul class="menu-items">
        <li>Super</li>
        <li>Duper</li>
        <li>Even more...</li>
    </ul>
</div>

<hr />
<h2>Implementation with pointer events:</h2>
<div class="menu pointer-events">
    <a href="#">Hover me</a>
    <ul class="menu-items">
        <li>Super</li>
        <li>Duper</li>
        <li>Even more...</li>
    </ul>
</div>
<div class="menu pointer-events">
    <a href="#">Now me</a>
    <ul class="menu-items">
        <li>Super</li>
        <li>Duper</li>
        <li>Even more...</li>
    </ul>
</div>
<div class="menu pointer-events">
    <a href="#">And finally me</a>
    <ul class="menu-items">
        <li>Super</li>
        <li>Duper</li>
        <li>Even more...</li>
    </ul>
</div>

​

这里还有一个指向jsFiddle演示的链接：http://jsfiddle.net/1411oc9p/3/

TL/DR

我的问题是:为什么我不能:hover我在IE11的子菜单？caniuse.com说IE11实现了指针事件，我是不是忘了什么，或者这个问题有解决办法吗？

Answer 1

我猜是因为IE不支持值:初始值

​

​

您可以始终尝试IE的javascript修复：

$(document).ready(function(){
    $(document).on('mousedown', '.your-class', function (e) {
        $(this).hide();
        var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
        $(this).show();
        $(BottomElement).mousedown(); //Manually fire the event for desired underlying element
        return false;
    });
});