使用带有位置的背景滑块时，菜单上的悬停消失：固定和 z-index

Posted 2023-03-06

【中文标题】使用带有位置的背景滑块时，菜单上的悬停消失：固定和 z-index

【英文标题】：Hover on menu disappears when using background slider with position:fixed and z-index

【发布时间】：2013-04-03 10:56:30

【问题描述】：

我发现如果我想进入第二级菜单，主菜单的悬停效果会消失。在这里您可以找到示例：

http://bfb.bplaced.net/ie/

html：

<div id="background-slider">
    <a href="http://www.hdwallpapersarena.com/wp-content/uploads/2012/10/Opera-Background-Blue-Swirls.jpg"></a>
    <a href="http://www.hdwallpapersarena.com/wp-content/uploads/2012/10/green-abstract-background.jpg"></a>
</div>
<div id="menu">
    <nav>
        <ul class="nav-level-1">
            <li class="level-1 clearfix">
                <a href="unternehmen.html" class="level-1">Unternehmen</a>
                <ul class="nav-level-2">
                    <li class="level-2"><a href="/unternehmen/die-firma.html" class="level-2">Die Firma</a></li>
                    <li class="level-2"><a href="/unternehmen/das-team.html" class="level-2">Das Team</a></li>
                    <li class="level-2"><a href="/unternehmen/allgemeines.html" class="level-2">Allgemeines</a></li>
                </ul>
            </li>
        </ul>
        <div class="clearer"></div>
    </nav>
</div>
<div id="script-section" class="hidden">
    <script src="./js/jquery.superbgimage.min.js"></script>
    <script>
        $(document).ready(function()
            // Options for SuperBGImage
            $.fn.superbgimage.options = 
                transition: 1,
                speed: 'slow',
                randomtransition: 0,
                slideshow: 1,
                slide_interval: 6000,
                randomimage: 0
            ;

            // initialize SuperBGImage
            $('#background-slider').superbgimage().hide;
        );
    </script>
</div>

CSS：

#menu 
    position: fixed;
    z-index: 4;
    left: 23px;
    bottom: 40px;


ul.nav-level-1 
    float: left;
    text-align: left;


ul.nav-level-1 li.level-1 
    /*float: left;*/


ul.nav-level-1 li.level-1 a.level-1 
    font-family: 'SourceSansProBlack', Arial, sans-serif;
    font-size: 36px;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    color: #123373;
    padding: 0 5px;
    transition: color 0.25s ease 0s, background-color 0.25s ease 0s;
    float: left;


ul.nav-level-1 li.level-1 a.level-1:hover 
    text-decoration: none;
    color: #123373;
    background-color: #FFF;
    display: inline-block;


ul.nav-level-1 li:hover a 
    background-color: #FFF;


ul.nav-level-1 li.level-1:hover ul.nav-level-2 
    display: block;


ul.nav-level-2 
    display: none;
    float: left;
    width: 390px;
    padding-left: 10px;
    text-align: left;


ul.nav-level-2  li.level-2 
    margin-bottom: 3px;
    margin-right: 5px;
    float: left;


ul.nav-level-2  li.level-2 a.level-2
    font-family: 'SourceSansProBold', Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #123373;
    padding: 0 5px;
    background-color: #FFF;
    transition: color 0.25s ease 0s, background-color 0.25s ease 0s;


ul.nav-level-2  li.level-2 a.level-2:hover
    background-color: #123373;
    color: #FFF;

我使用的滑块名为SuperBGImage。 如果我移除滑块，一切正常！

我认为这是 IE 的 z-Index 错误，但我通过添加 position: relative; 尝试了不同的选项，但没有成功。如何在 IE 中修复悬停效果？

我试过这段 JS 代码，但也没有用：

$('li.level-1').hover(function() 
    $(this).children('ul.nav-level-2').removeClass('hidden');
    $(this).children('ul.nav-level-2').addClass('visible');
);
$('ul.nav-level-2').mouseout(function() 
    $(this).removeClass('visible');
    $(this).addClass('hidden');
);

也许这是一个浮动问题。如果我删除 float: left; 效果会更好，但这不是它应该的设计。

编辑：

Here你可以下载项目。我注意到另一件事。如果我启动 Internet Explorer，他会问我是否要启动脚本或 Active-X 元素。他为什么这么问我？我知道这是因为滑块，但它应该是普通的 javascript。也许滑块中的 JS 在这里做了一些特别的事情......

【问题讨论】：

我不太明白 - 我觉得一切正常？

对不起，错过了标签。

@testing 在线测试越来越难，我们可以给你的项目包吗？

我认为这是为 OP 设计的？

通常 IE 会询问您“[您]是否要启动脚本或 Active-X 元素”，因为您正在从外部位置（来自 Internet）加载资源，即使页面正在加载本地（从硬盘驱动器）。除非请求被拒绝，否则这不会导致页面操作出现任何问题，因为它只会延迟通常在常规环境中没有此授权步骤而发生的进程。

【参考方案1】：

我已经让它在 IE9 和 IE10 上工作了应该也可以在 IE8 上工作，使用透明背景并将鼠标悬停在 .clearfix

查看更新 - jsFiddle

我改变了这个-

ul.nav-level-1 li.level-1 a.level-1:hover 
    text-decoration: none;
    color: #123373;
    background-color: #FFF;
    display: inline-block;

到这里-

.clearfix:hover ul.nav-level-1, li.level-1, a.level-1
    text-decoration: none;
    color: #123373;
    background: rgba(0, 0, 0, 0.0); /*** TRANSPARENT BACKGROUND FIX ***/
    display: inline-block;

并为此添加了高度和宽度-

.clearfix 
    display:block;
    width:100%;    /* added height and width */
    height:50px;

对于IE7及以下添加-

<!--[if lte IE 7]>
    <style type="text/css">
 .clearfix:hover ul.nav-level-1, li.level-1, a.level-1 
    text-decoration: none;
    color: #123373;
    background:#ffffff;
    display: inline-block;

    </style>
<![endif]-->

上述解决方法只是将透明 rgba 替换为纯白色。在古代 IE 中它不会那么漂亮，但很少有这样的东西。

请注意，IE8 及以下版本不支持<nav>

【讨论】：

感谢您的帮助。对于 IE7 和 IE8，我也需要这个。使用 jsFiddle 模拟器，我目前无法对其进行测试。

【参考方案2】：

使用位置：绝对它会工作:-)

【讨论】：

position:absolute; on #menu?

【参考方案3】：

CedricReichenbach 给我带来了另一个想法。添加透明背景图片 (1x1) 似乎适用于 IE：

.level-1 ul 
    background-image: url(../img/transparent-background.png);
    background-repeat: repeat;

虽然会进行更多测试。