html - 指针事件在父元素 :hover in 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 says IE11 has pointer-events implemented我是不是忘记了什么，或者是否有解决此问题的方法？

Answer 1

我猜是因为 IE does not support value:initial

你总是可以尝试 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;
    });
});