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

Posted 2023-03-06

【中文标题】悬停 IE 10/9/8 不适用于透明元素

【英文标题】：hover IE 10/9/8 doesn't work on transparent element

【发布时间】：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 菜单消失。

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