个人中心
gpt4 book ai didi

html - 如何在 CSS 中移动这三行导航栏？

转载 作者：行者123 更新时间：2023-11-28 02:14:15 25 4
gpt4 key购买 nike

在确保悬停效果有效的同时，我无法将这个三行导航栏移动到顶部。 #MenIcon 是我设法将它移到顶部的地方。但是，当我将鼠标悬停在三行导航栏上时，当三行导航栏不在顶部时，它并没有执行我创建的动画。

#MenuIcon{
    height: 25px;
    width: 50px;
    position: fixed;
    top: 60; /*I want this to be 5. But when I do this, the hover effect doesn't work*/
    right: 50;
}

#MenuIcon:hover{
    cursor: pointer;
}

#MenuLine{
    height: 4px;
    width: 50px;
    background-color: white; /* #181818 */
    position: relative;
    top: 100%;
    left: 100%;
    transform: translate(-50%,-50%);
    transition: all .3s;
}

#MenuIcon:hover #MenuLine{
    width: 40px;
}

#MenuLine::before{
    content: '';
    height: 4px;
    width: 40px;
    background-color: white;
    position: absolute;
    margin-top: 10px;
    transition: all .3s;
}

#MenuIcon:hover #MenuLine::before{
    width: 50px;
}

#MenuLine::after{
    content: '';
    height: 4px;
    width: 40px;
    background-color: white;
    position: absolute;
    margin-top: -10px;
    transition: all .3s;
}

#MenuIcon:hover #MenuLine::after{
    width: 50px;
}

编辑:这是 HTML 代码:

<html>
    <head>
        <title>Home</title>
        <link href="Resources/stylesheet.css" type="text/css" rel="stylesheet"/>

        <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">

        <script src="Resources/jquery-1.10.2.min.js"></script>
        <script src="Resources/JQUERY%20Main.js"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="fullscreen-bg">
            <video loop muted autoplay poster="Images/Videos/home.mp4" class="fullscreen-bg__video">
                <source src="Images/Videos/home.mp4" type="video/mp4">
            </video>
        </div>
        <div id="MenuIcon">
            <div id="MenuLine"></div>
        </div>
    </body>
</html>

最佳答案

我不确定您是否有 z-index 问题，因为这些文件链接到您的代码片段中的本地文件，但我认为这有助于解决问题。我更改了 #MenuIcon 的大小以覆盖所有 #MenuLine 这样现在它总是悬停在它上面并且它处于我认为你想要它的位置。然后改变#MenuIcon 和 .fullscreen-bg 上的 z-index。这样 #MenuIcon 将始终位于 .fullscreen-bg 之上。

#MenuIcon{
    height: 40px;
    width: 50px;
    position: fixed;
    top: 35px;
    right: 26px;
    z-index: 10;
}

#MenuLine{
    height: 4px;
    width: 50px;
    background-color: white; /* #181818 */
    position: relative;
    top: 18px;
    transition: all .3s;
}

.fullscreen-bg {
    position: relative;
    z-index: 1;
}

关于html - 如何在 CSS 中移动这三行导航栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48569461/

25 4 0
文章推荐： javascript - 如何在javascript中查找表中特定列的长度？
文章推荐： c++ - 图标是 SFML 中的黑色方 block
文章推荐： php - 错误的值(value)邮寄
文章推荐： php - CDATA 在 Yii 的 JS 上自动添加？