悬停 IE 10/9/8 不适用于透明元素答案

【问题标题】：hover IE 10/9/8 doesn't work on transparent element悬停 IE 10/9/8 不适用于透明元素
【发布时间】：2014-05-24 18:49:20
【问题描述】：

我有：

单页应用
悬停时打开的 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 菜单消失。

【问题讨论】：

标签： html css internet-explorer hover transparent

【解决方案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 没有在透明元素上注册悬停。

【讨论】：