堆棧內存溢出
  簡體   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  7   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