Question

我在左上角有一个图标，如下图所示：

当我将鼠标悬停在其上方时，我希望显示侧菜单（此刻当前未隐藏），方法是滑出然后再次悬停后再次返回，但是我无法使CSS工作。

问题片是：
#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>

Answer 1

我已经根据您的代码创建了一个有效的小提琴

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;
}

Answer 2

由于您希望图标和“ Nuclei”标签都链接到应用程序的根目录，因此我建议您将这两个项目组合在一个锚定链接中。这样，您可以在该链接上使用悬停效果，以使用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_icon上使用鼠标悬停以显示菜单。

// 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);
}

Answer 3

如果您希望仅使用CSS，那么我相信将其添加到样式表中即可解决问题。

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

将鼠标悬停在通过CSS

3 个答案: