堆栈内存溢出
  繁体   English   中英

当我将鼠标悬停在元素上时，为什么整个内容框都不会改变颜色？ 左边有空白

[英]When I hover over an element why won't the whole content box change color? There's empty space to the left

 原文  2019-05-12 04:22:43  9   2    html/ css/ hover

问题描述

我正在尝试创建一个响应式侧边菜单以滑动进出。 我希望每个元素的悬停状态能扩展容器的整个宽度，但是由于某种原因始终存在间隙，并且我无法使文本向右对齐。 我已经尽我所能尝试了一切，并尽了最大的努力进行了研究，却一无所获。 有人可以帮助我了解问题出在哪里吗？ 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Brushworks NW Inc.</title>
</head>
<body>
    <nav class="navbar animated fadeIn">
        <span class="open-slide">
            <a href="#" onclick="openSlideMenu()">
                <svg width="30" height="30">
                    <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
                    <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
                    <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
                </svg>
            </a>
        </span>
        <ul class="navbar-links">
            <li><a class="active" href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">CONTACT US</a></li>
            <li id="number">(360) 679-4444</li>
        </ul>
    </nav>
    <div class="side-hidden">

    </div>
    <div id="side-menu" class="side-nav">
        <ul>
            <li><a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a></li><br>
            <li class="nav-item"><a href="#">Home</a></li>
            <li class="nav-item"><a href="#">About</a></li>
            <li class="nav-item"><a href="#">Services</a></li>
            <li class="nav-item"><a href="#">Contact</a></li>
        </ul>
    </div>

    <script>
        function openSlideMenu(){
          document.getElementById('side-menu').style.width = '250px';
        }

        function closeSlideMenu(){
          document.getElementById('side-menu').style.width = '0';
        }
    </script>

</body>
</html>

body, html{
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
}

.container{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/*-- ----------------------------------------------------------------------------------- -->
<!--                                  NAVIGATION                                         -->
<!-- ----------------------------------------------------------------------------------- --*/

.navbar {
    background-color: #FFFFFF;
    width: 100%;
    height: 100px;
    margin: 0;
    border-bottom: 8px solid #CE2026;
}
.navbar-links {
    max-width: 1090px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    bottom: 15px;
    left: 30px;
}

.navbar-links a:hover {
    background: #831517;
    color: #FFFFFF;
    transition: background 0.4s ease 0s;
    transition-property: background;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    transition-delay: 0s;
 }

.navbar-links a {
    display: inline;
    color: #444444;
    text-decoration: none;
    text-align: center;
    margin: 0 5px 0 0;
    font-size: 15px;
    padding: 10px 17px;
    right: 25px;
}

nav .active {
    background: #CE2026;
    color: #FFFFFF;
 }

.navbar ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-decoration: none;
    width: 100%;
    height: 100px;
}


ul li {
    list-style: none;
    display: inline-block;
    margin-top: 50px;
    font-size: 1.4em;
}


#number {
    float: right;
    padding-right: 0;
    margin-top: 50px;
    margin-right: 85px;
    font-size: 21px;
    font-weight: normal;
}

.side-hidden {
    background-color: #000;
    opacity: 0.6;
    height: 1000px;
    width: 100%;
    position: relative;
    top: 0;
    right: 250px;
    margin: 0;
    display: none;
}

/* Responsive Menu*/
.open-slide {
    float: right;
    z-index: 5;
    display: none;
}

.side-nav {
    width: 0;
    height: 100%;
    z-index: 1;
    position: fixed;
    background-color: #111;
    opacity: 0.9;
    transition: 0.5s;
    right: 0px;
    text-align: right;
    display: block;
    transition: 0.3s;
    z-index: 6;
}

.side-nav ul {
    display: block;
    text-decoration: none;
    color: #ccc;
    z-index: 6;
}

.side-nav ul a {
    position: relative;
    width: 100%;
    padding: 10px 130px 10px 100px;
    text-decoration: none;
    color: #ccc;
    margin-right: 20px;
    z-index: 6;
    right: 30px;
    text-align: right;
}

.side-nav .btn-close {
    position: absolute;
    top: 0;
    left: 22px;
    font-size: 36px;

}

.side-nav a:hover {
    color: #fff;
    background: #CE2026;
}

@media only screen and (max-width: 1000px) {
  .navbar-links {
    display: none;
  }

  .open-slide {
    display: block;
    margin-right: 5%;
    margin-top: 3.5%;
  }
}

首先，最小化屏幕以切换移动视图。 当您单击汉堡菜单时，它会滑出。 但是，当您将鼠标悬停在导航链接上时，只有部分元素块突出显示为红色，而不是整个宽度。 高亮块应该是一个在另一个之上，但是导航链接之间存在间隙。 我不知道为什么我不能让它做我想做的事，我觉得我已经尽了一切。

2 个解决方案

解决方案1
 0 已采纳  2019-05-12 06:20:57

在＃side-menu中给您的无序列表填充0px； 然后删除right: 30px; 从.nav-item内部的锚点开始。 我还对您的一些属性进行了调整，以使其正常运行。 您可以在下面看到工作代码（在完整页面中查看）： 

 body, html{ font-family: 'Raleway', sans-serif; margin: 0; padding: 0; width: 100%; } .container{ max-width: 980px; margin-left: auto; margin-right: auto; } /*-- ----------------------------------------------------------------------------------- --> <!-- NAVIGATION --> <!-- ----------------------------------------------------------------------------------- --*/ .navbar { background-color: #FFFFFF; width: 100%; height: 100px; margin: 0; border-bottom: 8px solid #CE2026; } .navbar-links { max-width: 1090px; margin-left: auto; margin-right: auto; position: relative; bottom: 15px; left: 30px; } .navbar-links a:hover { background: #831517; color: #FFFFFF; transition: background 0.4s ease 0s; transition-property: background; transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s; } .navbar-links a { display: inline; color: #444444; text-decoration: none; text-align: center; margin: 0 5px 0 0; font-size: 15px; padding: 10px 17px; right: 25px; } nav .active { background: #CE2026; color: #FFFFFF; } .navbar ul { margin: 0 auto; padding: 0; list-style: none; text-decoration: none; width: 100%; height: 100px; } ul li { list-style: none; display: inline-block; margin-top: 50px; font-size: 1.4em; } #number { float: right; padding-right: 0; margin-top: 50px; margin-right: 85px; font-size: 21px; font-weight: normal; } .side-hidden { background-color: #000; opacity: 0.6; height: 1000px; width: 100%; position: relative; top: 0; right: 250px; margin: 0; display: none; } /* Responsive Menu*/ .open-slide { float: right; z-index: 5; display: none; } .side-nav { width: 0; height: 100%; z-index: 1; position: fixed; background-color: #111; opacity: 0.9; transition: 0.5s; right: 0px; text-align: right; display: block; transition: 0.3s; z-index: 6; } .side-nav ul { display: block; text-decoration: none; color: #ccc; z-index: 6; /* Added this */ padding: 0; } /* Added this */ .nav-item { display:block; } .side-nav ul a { position: relative; width: 100%; /* Changed this */ /* padding: 10px 130px 10px 100px;*/ padding: 10px 15px; text-decoration: none; color: #ccc; margin-right: 20px; z-index: 6; /* Removed this */ /* right: 30px; */ text-align: right; /* Added these */ display: block; box-sizing: border-box; } .side-nav .btn-close { position: absolute; top: 0; /* Changed this */ /* left: 22px; */ left: 0; font-size: 36px; } .side-nav a:hover { color: #fff; background: #CE2026; } @media only screen and (max-width: 1000px) { .navbar-links { display: none; } .open-slide { display: block; margin-right: 5%; margin-top: 3.5%; } } 
 <nav class="navbar animated fadeIn"> <span class="open-slide"> <a href="#" onclick="openSlideMenu()"> <svg width="30" height="30"> <path d="M0,5 30,5" stroke="#000" stroke-width="5"/> <path d="M0,14 30,14" stroke="#000" stroke-width="5"/> <path d="M0,23 30,23" stroke="#000" stroke-width="5"/> </svg> </a> </span> <ul class="navbar-links"> <li><a class="active" href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">CONTACT US</a></li> <li id="number">(360) 679-4444</li> </ul> </nav> <div class="side-hidden"> </div> <div id="side-menu" class="side-nav"> <ul> <li><a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a></li><br> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Services</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> </div> <script> function openSlideMenu(){ document.getElementById('side-menu').style.width = '250px'; } function closeSlideMenu(){ document.getElementById('side-menu').style.width = '0'; } </script>

解决方案2
 0  2019-05-12 06:43:33

我希望这可以帮助：

1条建议而不是更改单击时导航栏的宽度，您可以使用display属性（我已经实现了这一点）： 

<div id="side-menu" style="width:250px; display:none;" class="side-nav">
  .....

<script>
    function openSlideMenu(){
      document.getElementById('side-menu').style.display = 'block';
    }

    function closeSlideMenu(){
      document.getElementById('side-menu').style.display = 'none';
    }
</script>


 body, html{ font-family: 'Raleway', sans-serif; margin: 0; padding: 0; width: 100%; } .container{ max-width: 980px; margin-left: auto; margin-right: auto; } /*-- ----------------------------------------------------------------------------------- --> <!-- NAVIGATION --> <!-- ----------------------------------------------------------------------------------- --*/ .navbar { background-color: #FFFFFF; width: 100%; height: 100px; margin: 0; border-bottom: 8px solid #CE2026; } .navbar-links { max-width: 1090px; margin-left: auto; margin-right: auto; position: relative; bottom: 15px; left: 30px; } .navbar-links a:hover { background: #831517; color: #FFFFFF; transition: background 0.4s ease 0s; transition-property: background; transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s; } .navbar-links a { display: inline; color: #444444; text-decoration: none; text-align: center; margin: 0 5px 0 0; font-size: 15px; padding: 10px 17px; right: 25px; } nav .active { background: #CE2026; color: #FFFFFF; } .navbar ul { margin: 0 auto; padding: 0; list-style: none; text-decoration: none; width: 100%; height: 100px; } ul li { list-style: none; display: inline-block; margin-top: 30px; font-size: 1.4em; } #number { float: right; padding-right: 0; margin-top: 50px; margin-right: 85px; font-size: 21px; font-weight: normal; } .side-hidden { background-color: #000; opacity: 0.6; height: 1000px; width: 100%; position: relative; top: 0; right: 250px; margin: 0; display: none; } /* Responsive Menu*/ .open-slide { float: right; z-index: 5; display: none; } .side-nav { width: 0; height: 100%; z-index: 1; position: fixed; background-color: #111; opacity: 0.9; transition: 0.5s; right: 0px; text-align: right; display: block; transition: 0.3s; z-index: 6; } .side-nav ul { display: block; text-decoration: none; color: #ccc; z-index: 6; } .side-nav ul a { position: relative; width: 100%; padding: 10px 130px 10px 100px; text-decoration: none; color: #ccc; margin-right: 0%; z-index: 6; right: 40px; text-align: right; } /* Modified this */ .btn-close { position: absolute !important; font-size: 36px; padding: 0px !important; padding-right: 0px !important; width: 100% !important; right: 0 !important; margin-top: 0 px; text-align: middle !important; z-index: 6; top: 0px; } .side-nav a:hover { color: #fff; background: #CE2026; } @media only screen and (max-width: 1000px) { .navbar-links { display: none; } .open-slide { display: block; margin-right: 5%; margin-top: 3.5%; } } 
 <html> <head> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Brushworks NW Inc.</title> </head> <body> <body> <nav class="navbar animated fadeIn"> <span class="open-slide"> <a href="#" onclick="openSlideMenu()"> <svg width="30" height="30"> <path d="M0,5 30,5" stroke="#000" stroke-width="5"/> <path d="M0,14 30,14" stroke="#000" stroke-width="5"/> <path d="M0,23 30,23" stroke="#000" stroke-width="5"/> </svg> </a> </span> <ul class="navbar-links"> <li><a class="active" href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">CONTACT US</a></li> <li id="number">(360) 679-4444</li> </ul> </nav> <div class="side-hidden"> </div> <div id="side-menu" style="width:250px; display:none;" class="side-nav"> <ul> <li><a href="#" class="btn-close" onclick="closeSlideMenu()">&nbsp; &times; &nbsp;</a></li><br> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Services</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> </div> <script> function openSlideMenu(){ document.getElementById('side-menu').style.display = 'block'; } function closeSlideMenu(){ document.getElementById('side-menu').style.display = 'none'; } </script> </body> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 当我将鼠标悬停在导航菜单上时，它会将内容下推，为什么？ 悬停时如何更改li的颜色？ 仅将鼠标悬停在内容上，而不将其悬空激活 为什么 <li> 元素悬停在图像上后将鼠标悬停在元素上时，颜色和宽度不会改变吗？ 当 hover 超过元素时改变颜色 将鼠标悬停在子元素上时更改父元素的颜色 当我将鼠标悬停在按钮上时，为什么这个阴影不会消失？ 当鼠标悬停在链接上时，为什么部分css悬停颜色会遗留下来？ 导航栏 a:hover 不会改变背景颜色 悬停时字体颜色不会改变 超链接不会在悬停或访问时更改颜色
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM