html - 悬停 IE 10/9/8 不适用于透明元素

Question

我有:

1. 单页应用
2. 悬停时打开的 CSS 大型菜单

当用户单击链接时，当我单击链接的文本时，菜单不会在 IE 10/9/8 中消失。如果我单击文本周围的间距，它就会消失。

试图弄清楚这个问题...它在 Chrome/IE11 中工作正常

这是使其适用于 Chrome/IE11 的代码:

    var $a = _i.$(jqEvent.target);
    var $menu = $a.closest('.areaNav');
    var $tempBlockOut = _i.$('<div class="tempBlockOut"></div>');
    $tempBlockOut.appendTo($menu.parent());
    var z = $a.closest('.megamenu').css('z-index');
    $tempBlockOut.css({ width: '50px', height: '50px', background: 'transparent', position: 'absolute', 'z-index': z }).position({
        of: jqEvent
    });
    setTimeout(function () {
        $tempBlockOut.remove();
    }, 100);

我在光标所在的位置放置了一个透明的 div，这样当用户选择一个链接时悬停会被重置并且 CSS 菜单会消失。

Answer 1

以下代码修复了 IE10/9/8 的这个问题

    $tempBlockOut.css({ width: '50px', height: '50px', background: '#fff', opacity: 0, position: 'absolute', 'z-index': z }).position({
        of: jqEvent
    });

将背景更改为#fff，并将不透明度设置为零。显然 IE10/9/8 不会在透明元素上注册悬停。