Question

我有：

单页应用
在悬停时打开的CSS mega菜单

当用户点击链接时，当我点击链接文本时，菜单不会在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不会将鼠标悬停在透明元素上。

IE 10/9/8悬停在透明元素上不起作用

1 个答案: