懸停不能覆蓋整個文本

我在左上角有一個菜單欄，但懸停和活動元素不能覆蓋整個文本。我對此很陌生，頁面沒有完成，所以不需要指出它看起來有多糟糕。整個頁面都是挪威語，所以可能會有點混亂。它應該是一種電影註冊，我知道它可能在我的代碼中有很多錯誤，但是我現在想要解決的問題是懸停和活動:)懸停不能覆蓋整個文本

這是我的html ：

<!--MENUBAR--> 

     <div id="nav"> 
      <ul class="first"> 

      <li><a class="active" href="startside.html">Startside</a> 
      </li> 
      <li><a href="minelån.html">Mine lån</a> 
      </li> 
      <li><a href="Minliste.html">Min liste</a> 
      </li> 
      </ul> 
     </div> 

     </header> 

     <!-- LOGIN --> 

     <form> 
     <span class='login'> 

     <label for="E-postadresse">E-postadresse</label> 
     <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" /> 

     <label for="Passord">Passord</label> 
     <input type="password" placeholder="Passord" id="Passord" /> 

     <input type="submit" value="Logg inn" /> 
     </span> 
     </form> 
    </body> 

    </html> 

<!-- end snippet -->

和CSS：

/*MENUBAR*/ 

#nav { 
    background-color: #999999; 
    position: absolute; 
    top:0px; 
    padding-left: 85px; 
    height: 50px; 
    overflow: hidden; 
    margin-top: -5px; 
    left: -90px; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    font-size: 0; 
    padding: 5px; 
    overflow: hidden; 
    font-family: Arial, Helvetica, sans-serif; 
    background-color: #808080; 
} 

.first li { 
    display: inline-block; 
} 

li a { 
    display:block; 
    text-decoration: none; 
    text-align: center; 
    padding: 15px 20px; 
    color: white; 
    cursor:pointer; 
    font-size: 16px; 
} 

li a:hover { 
    background-color:#333333; 
} 
.active { 
    background-color:#333333; 
} 

/* LOG IN*/ 

form { 
    float:right; 
    font-family: Arial, Helvetica, sans-serif; 
} 

.login { 
    position: absolute; 
    top: 10px; 
    right: 25px; 
    font-size: 50%; 
    display: inline-block; 
} 

input{ 
    font-size: 90%; 
}

來源

2017-02-10 ingvaha

請將您的代碼片段簡化爲與您的問題相關的部分，如果問題只是關於菜單欄，請不要粘貼整個頁面。減少代碼也可能會導致您找到正確的答案，所以始終值得嘗試隔離問題。 – GolezTrol

哦對不起，完成了！ – ingvaha

您應該刪除li元素之間的空間，這樣

<ul class="first"> 

    <li><a class="active" href="startside.html">Startside</a> 
    </li><li><a href="minelån.html">Mine lån</a> 
    </li><li><a href="Minliste.html">Min liste</a></li> 
    </ul>

這就像li元素和div之間的空格，如果他們在新行上鍵入（如果解釋錯誤，我很抱歉）。

來源

2017-02-10 20:12:23 BARNI

您還可以將css屬性'font-size：0;'添加到'ul'元素，然後將實際字體大小添加到內部'li'元素，如下所示：'font-size：16px;'這也可以（不刪除空格）。 – BARNI

這在某種程度上有效。兩側的空間消失了，但底部仍有空間。但是非常感謝你:) – ingvaha

html 
 
/*FLEXBOX*/ 
 

 
{ 
 
    font-family: "Arsenal", "Times New Roman"; 
 
} 
 
body { 
 
    background: #333333; 
 
    margin: 0; 
 
} 
 
header { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background: #999999; 
 
    height: 50px; 
 
    padding-right: 100px; 
 
} 
 
/*SISTE LÅNTE*/ 
 

 
main { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 
.main { 
 
    background: #999999; 
 
    flex-grow: 1; 
 
    order: 2; 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
.main h5 { 
 
    padding-left: 10px; 
 
} 
 
/*TILGJENGELIGE FILMER*/ 
 

 
.left { 
 
    background: #999999; 
 
    flex-grow: 1; 
 
    order: 1; 
 
    margin: 20px; 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
.left h5 { 
 
    padding-left: 10px; 
 
} 
 
/*ANBEFALINGER*/ 
 

 
.right { 
 
    background: #999999; 
 
    flex-grow: 1; 
 
    order: 3; 
 
    margin: 20px; 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
.left, 
 
.right, 
 
.main { 
 
    margin: 20px 20px; 
 
    border-style: solid; 
 
    border-color: black; 
 
    border-width: 5px 5px 5px 5px; 
 
} 
 
.right h5 { 
 
    padding-left: 10px; 
 
} 
 
/*RUTINER*/ 
 

 
footer { 
 
    background: #999999; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    align-items: flex-start; 
 
    height: 155px; 
 
    margin: 20px; 
 
    margin-top: 0px; 
 
    padding: 10px; 
 
    color: white; 
 
    border-style: solid; 
 
    border-color: black; 
 
    border-width: 5px 5px 5px 5px; 
 
} 
 
/*MENUBAR*/ 
 

 
#nav { 
 
    background-color: #999999; 
 
    position: absolute; 
 
    top: 0px; 
 
    padding-left: 85px; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    margin-top: -5px; 
 
    left: -90px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 5px; 
 
    overflow: hidden; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    background-color: #999999; 
 
} 
 
.first li { 
 
    display: inline-block; 
 
} 
 
li a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    padding: 15px 20px; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 
li a:hover { 
 
    background-color: #ddd; 
 
} 
 
li a:active { 
 
    background-color: #ccc; 
 
} 
 
/* LOG IN*/ 
 

 
form { 
 
    float: right; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
.login { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 25px; 
 
    font-size: 50%; 
 
    display: inline-block; 
 
} 
 
input { 
 
    font-size: 90%; 
 
} 
 
/*ALLE FILMER*/ 
 

 
.movie1 { 
 
    display: flex; 
 
} 
 
.movie1 img { 
 
    padding: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet"> 
 
    <link rel="stylesheet" href="Startside.css" type="text/css"> 
 

 

 
    <title>Filmregister</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <h2>Filmregister</h2> 
 

 

 

 

 

 
    <!--MENUBAR--> 
 

 
    <div id="nav"> 
 
     <ul class="first"> 
 

 
     <li><a class="active" href="startside.html">Startside</a> 
 
     </li> 
 
     <li><a href="minelån.html">Mine lån</a> 
 
     </li> 
 
     <li><a href="Minliste.html">Min liste</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </header> 
 

 

 

 

 

 

 
    <!--SISTE LÅNTE--> 
 

 
    <main> 
 

 
    <div class="main"> 
 
     <h5>Siste lånte</h5> 
 
     <div class="movies"> 
 

 

 

 

 
     <div class="movie1"> 
 
      <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html"> 
 
      <img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie"> 
 
      </a> 
 
      <small> 
 
    <br> 
 
    Utgitt: 2008 
 
    <br> 
 
    Bryan Singer 
 
    <br> 
 
    Krig 
 
    <br> 
 
    Film(dvd-video) 
 
    </small> 
 
     </div> 
 

 

 

 

 
     <div class="movie1"> 
 
      <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/MinorityReport.html"> 
 
      <img src="MinorityReport3.jpg" width="100" height="140" alt="MinorityReport"> 
 
      </a> 
 
      <small> 
 
    <br> 
 
    Utgitt: 2002 
 
    <br> 
 
    Steven Spielberg 
 
    <br> 
 
    Sci-fi 
 
    <br> 
 
    Film(dvd-video) 
 
    </small> 
 
     </div> 
 

 

 

 

 
     </div> 
 
    </div> 
 

 

 

 

 

 

 

 

 
    <!--TILGJENGELIGE FILMER--> 
 

 
    <div class="left"> 
 
     <h5>Tilgjengelige filmer</h5> 
 

 
     <div class="movies"> 
 

 

 

 

 

 

 
     <div class="movie1"> 
 
      <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html"> 
 
      <img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables"> 
 
      </a> 
 

 
      <small> 
 
    <br> 
 
    Utgitt: 2011 
 
    <br> 
 
    Olivier Nakache/Eric Toledano 
 
    <br> 
 
    Drama, biografi, komedie 
 
    <br> 
 
    Film(dvd-video) 
 
    </small> 
 
     </div> 
 

 

 

 

 
     <div class="movie1"> 
 
      <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Lunchbox.html?E-postadresse="> 
 
      <img src="TheLunchbox1.jpg" width="100" height="140" alt="The-Lunchbox"> 
 
      </a> 
 

 
      <small> 
 
    <br> 
 
    Utgitt: 2013 
 
    <br> 
 
    Ritesh Batra 
 
    <br> 
 
    Romanse, komedie 
 
    <br> 
 
    Film(dvd-video) 
 
    </small> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

 

 

 

 

 

 
    <!--ANBEFALINGER--> 
 

 
    <div class="right"> 
 
     <h5>Anbefalinger</h5> 
 
     <div class="movies"> 
 

 

 
     <div class="movie1"> 
 
      <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/The-Intouchables.html"> 
 
      <img src="TheIntouchables3.jpg" width="100" height="140" alt="The-Intouchables"> 
 
      </a> 
 

 
      <small> 
 
    <br> 
 
    Utgitt: 2011 
 
    <br> 
 
    Olivier Nakache/Eric Toledano 
 
    <br> 
 
    Drama, biografi, komedie 
 
    <br> 
 
    Film(dvd-video) 
 
    </small> 
 
     </div> 
 

 

 
     <div class="movie1"> 
 
      <a href="file:///C:/Users/kodde/Desktop/Webpage%20ver2/Valkyrie.html"> 
 
      <img src="valkyrie1.jpg" width="100" height="140" alt="Valkyrie"> 
 
      </a> 
 
      <small> 
 
    <br> 
 
    Utgitt: 2008 
 
    <br> 
 
    Bryan Singer 
 
    <br> 
 
    Krig 
 
    <br> 
 
    Film(dvd-video) 
 
    </small> 
 
     </div> 
 

 

 
     </div> 
 
    </div> 
 

 
    </main> 
 

 

 

 

 

 

 

 
    <!--RUTINER--> 
 

 
    <footer> 
 
    <strong>Rutiner</strong> 
 
    <ul id="rutiner"> 
 
     <br> 
 
     <li> <small> 1. Følgende kan låne: staben ved Institutt for informasjons- og medievitenskap, studenter ved instituttet, på grunnlag av faglig begrunnelse, andre ved UiB etter særlig avtale for et avgrenset tidsrom eller for et avgrenset prosjekt.</small> 
 
     </li> 
 

 
     <li> <small> 2. Bestillinger vil bli effektuert hver arbeidsdag mellom klokken 14:00 og 15:00.</small> 
 
     </li> 
 

 
     <li><small> 3. Ansatte ved instituttet får filmen lagt i posthyllen, studenter og andre får tilbakemelding om hvor og når filmen kan hentes.</small> 
 
     </li> 
 

 
     <li> <small> 4. For alt utlån gjelder en generell regel om lånetid på 1 uke, som kan forlenges med ytterligere en uke. Ønskes en film lånt over en lengre periode må dette begrunnes, og hver enkelt forespørsel vil bli vurdert. </small> 
 
     </li> 
 

 
     <li> <small> 5. Film skal leveres tilbake i posthyllen merket retur av film.</small> 
 
     </li> 
 

 
    </ul> 
 
    </footer> 
 

 

 

 

 

 

 
    <!-- LOGIN --> 
 

 
    <form> 
 
    <span class='login'> 
 
    
 
    <label for="E-postadresse">E-postadresse</label> 
 
    <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" /> 
 
    
 
    <label for="Passord">Passord</label> 
 
    <input type="password" placeholder="Passord" id="Passord" /> 
 
    
 
    <input type="submit" value="Logg inn" /> 
 
    </span> 
 
    </form> 
 

 

 

 

 
</body> 
 

 
</html>

來源

2017-02-10 20:39:16 Handelika

我改變顏色。因爲他們都是一樣的。你看不到差異。並且還必須在「li a」標籤中使用：hover和：active用於更改文本背景 – Handelika

添加寬度和高度屬性到錨元件應該修復它：

li a { width: auto; height: auto; }

懸停效果：

li a:hover { color: #999; }

注：活性效果每當你點擊元素時觸發。因此，頁面重新加載後不會產生任何效果。

來源

2017-02-10 20:51:03

懸停不能覆蓋整個文本

回答

相關問題