悬停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,光标位于这里,当用户选择一个链接时,hover会被重置并且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没有注册悬停在透明元素上.