jquery - CSS 转换和定位的 Z-index 问题

Question

有一些代码

<aside class="fixed-col">
<div class="fix-wrap cf">
    <div class="fixed-col-inner">
        <h1>LOREMr</h1>
        <div class="menu-button">
            <a href="#" onclick="return false" class="close-menu"></a>
        </div><!-- menu-button -->
        <input type="text" id="search" placeholder="search...">
        <button class="search-button"></button>
        <div class="fav-wrap">
            <a href="#" class="fav">fav (0)</a>
        </div><!-- fav-wrap -->
        <div class="menu-side">
        <div class="main-menu-wrap">
            <img src="img/userpic.png" height="31" width="31" alt="">
            <a href="#" class="username">username</a>
            <a href="#" class="logout">logout</a>
            <ul class="main-nav">
                <li><a href="#">articles</a></li>
                <li class="last-li"></li>
            </ul>
            </div><!-- main-menu-wrap -->
            <ul class="second-nav">
                <li class="open-hidden-nav">
                    <a href="#">HOVER HERE</a>
                    <div class="hidden-nav">
                        <h4>123</h4>
                        <ul class="home-menu-list">
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                        </ul>
                        <h4>222</h4>
                        <ul class="decor-menu-list">
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                        </ul>
                    </div><!-- hidden-nav -->
                </li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </div><!-- menu-side -->
        <ul class="social">
            <li class="facebook"><a href="#"></a></li>
        </ul>
    </div><!-- fixed-col-inner -->
    </div><!-- fix-wrap -->
</aside><!-- fixed-col -->
<aside class="fixed-col-closed">
    <div class="fix-wrap">
        <div class="fixed-col-closed-inner">
            <div class="menu-button">
                <a href="#" onclick="return false" class="open-menu"></a>
            </div><!-- menu-button -->
            <ul class="closed-fav">
                <li class="fav-ico"></li>
                <li><a href="#">0</a></li>
            </ul>
            <ul class="closed-social">
                <li class="facebook"><a href="#"></a></li>
                <li class="vk"><a href="#"></a></li>
            </ul>
        </div>
    </div><!-- fix-wrap -->
</aside><!-- fixed-col-close -->
    <div class="to-top">
    <a href="#" class="scrollup">Scroll</a>
</div>
    <section class="main-section cf opened-side"> 
        <div class="col">
        <article class="item">
            <a href="#"><img src="img/img1.jpg" height="286" width="366" alt=""></a>
            <h2><a href="#">LOREM IPSUM DOLOR</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum excepturi omnis quae nulla officia asperiores repudiandae ratione labore eius eveniet? Unde architecto omnis itaque doloribus nostrum odit exercitationem ipsum non.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nemo ut suscipit accusamus minus soluta iure mollitia est aliquam dolores ipsa officia id quia distinctio recusandae eaque ea. Libero cum.</p>
            <a href="#" class="read-more">read-more</a>
            <div class="hidden-article-item">
                <p class="author"><a href="#">author</a></p>
                <p class="like-and-view"><span class="view">12</span> <span class="like">5</span></p>
            </div><!-- hidden-article-item -->
        </article>
            </div>
    </section>

其固定定位左侧边栏。将鼠标悬停在 .open-hidden-nav 上时，会出现一个隐藏菜单，该菜单从左向右滑动并位于边栏附近，position: fixed。

问题

• 在 safari (Mac OS) 中，当您将鼠标悬停在 .open-hidden-nav 上时，没有任何内容会打开。您可以看到隐藏的菜单从左向右滑动，因为侧边栏背景是透明的，但您看不到最终形式的菜单。
• 使用谷歌浏览器 (windows) 一切似乎都很好，但事实并非如此 :) 当您在 .open-hidden-nav 上将鼠标从底部移动到顶部时它工作正常，但是当您尝试悬停文章(在右侧边栏附近)然后 .open-hidden-nav - 你可以看到隐藏菜单打开之前有一些延迟..

这里是 JsFiddle DEMO .

感谢您的帮助。

谁不知道如何进入代码编辑模式 - 只需从链接中删除 /show/。

Answer 1

.main-section {
    margin-left: 290px;
    margin-right: 65px;
    background: #fff;
    box-shadow: 4px 0 5px -2px #d0d0d0;
    position: relative;
    z-index: -100;
}
.hidden-nav {
    width: 206px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -290px;
    background: black;
    transition: .5s;
    z-index: 100;
    overflow-y: auto;
}

我尝试使用此 css，从右侧悬停时 chrome 没有跳转。所以两个容器都需要 z-index。