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菜单也会消失。

- Nateous

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不会在透明元素上注册悬停事件。

- Nateous