代码之家 › 专栏 › 技术社区 › Hank

试图通过css在链接上方悬停时显示隐藏的导航元素

css html

Hank · 技术社区 · 7 年前

我在左上方有一个图标,如下图所示:

问题是:
#nuke_logo > a:hover:nth-child(1) + #nukeSideMenu, #nukeSideMenu:Hover{}

html代码段:

<div id="nuke_logo" class="col-xs-12 col-sm-2">
    <a id="nuke_icon" href="/">
        <img src="/Images/Nuclei/nuclei_md.png">
    </a>
    <a class="" href="/">Nuclei</a>
    <nav id="nukeSideMenu" role="navigation">
        <div>
            <ul id="side-menu" class="nav">
                <li>
                    <a id="lm_CSM" class="">
                        <img alt="CSM" src="/Images/LauncherButtons/CSM_Launcher.png">
                        <span class="menu-title">Customer Services</span>
                    </a>
                </li>
                <li>
                    <a id="lm_ADMIN" class="">
                        <img alt="ADMIN" src="/Images/LauncherButtons/ADMIN_Launcher.png">
                        <span class="menu-title">Administration</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</div>

css代码段:

<style>
    #nuke_logo {
        position:relative;
        background:#dbdbdb;
    }
    #nuke_logo a:nth-child(1) {
        text-decoration: none;
    }
    #nuke_logo > a:nth-child(1) img {
        width: 32px;
        height: 32px;
        vertical-align:top;
        margin: 10px 5px 1px 0;
        background:#dbdbdb;

        -webkit-transition: 
            -webkit-transform 0.4s ease-in-out;
        -moz-transition:  
            -moz-transform 0.4s ease-in-out;
        -o-transition: 
            -o-transform 0.4s ease-in-out; 
        -ms-transition: 
            -ms-transform 0.4s ease-in-out; 
        transition: 
            transform 0.4s ease-in-out;
    }

    #nuke_logo > a:hover:nth-child(1) img {

        text-decoration: none;
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    #nuke_logo a:nth-child(2) {
        color: #525252;
        font-family: "Righteous",cursive;
        display: inline;
        font-size: 20px;
        line-height: 50px;
    }
    #nuke_logo a:nth-child(2):hover {
        text-decoration: none;
    }

    #nuke_logo > a:hover:nth-child(1) + #nukeSideMenu, #nukeSideMenu:Hover {
        width: 55px;
        overflow: auto;
    }

    #nukeSideMenu {
        display: block;
        position: absolute;
        width: 0px;
        overflow: hidden;
        z-index: 1;
        top: 50px;
        left: 0;
        transition-timing-function: ease;
        -moz-transition-timing-function: ease;
        -webkit-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-property: width;
        -moz-transition-property: width;
        -webkit-transition-property: width;
        -o-transition-property: width;
        transition-duration: 2s;
        -moz-transition-duration: 2s;
        -webkit-transition-duration: 2s;
        -o-transition-duration: 2s;
    }
</style>

3 回复 | 直到 7 年前

Pixelomo 7 年前

https://jsfiddle.net/y7vufxh8/

而不是 #nuke_logo > a:hover:nth-child(1) #nuke_logo a:hover

另外,在悬停时更改宽度看起来很糟糕,请使用translate3d制作平滑的动画

 #nuke_logo a:hover + #nukeSideMenu, #nukeSideMenu:hover {
    transform: translate3d(0,0,0);
    overflow: auto;
}

#nukeSideMenu {
    display: block;
    position: absolute;
    width: 50%;
    overflow: hidden;
    z-index: 1;
    top: 50px;
    left: 0;
    transform: translate3d(-50%,0,0);
    transition: 1s ease-in-out;
}

brianespinosa 7 年前

由于您希望图标和“Nucleus”标签都链接到应用程序的根目录,因此我建议您将这两个项目合并到一个锚链接中。这样,您就可以使用该链接上的悬停效果,使用CSS同级选择器打开下面的菜单。

// Change this:
<a id="nuke_icon" href="/">
    <img src="/Images/Nuclei/nuclei_md.png">
</a>
<a class="" href="/">Nuclei</a>
<nav id="nukeSideMenu" role="navigation">...

// To this:
<a id="nuke_icon" href="/">
  <img src="/Images/Nuclei/nuclei_md.png" />
  <h1>Nuclei</h1>
</a>
<nav id="nukeSideMenu" role="navigation">...

现在,我们可以使用悬停在#nuke_图标使菜单出现。

// Add this to your styles for #nukeSideMenu 
#nukeSideMenu {
  transform: translateX(-100%);
}

// And create this new rule for the hover on the icon with the sibling selector
#nuke_icon:hover + #nukeSideMenu {
  transform: translateX(0);
}

-1

Kiran Shahi Jonny 7 年前

如果您希望只使用CSS,那么我相信将其添加到样式表中就可以了。

#nuke_logo:hover #nukeSideMenu {
  width: 55px;
}