悬停不能覆盖整个文本

我在左上角有一个菜单栏，但悬停和活动元素不能覆盖整个文本。我对此很陌生，页面没有完成，所以不需要指出它看起来有多糟糕。整个页面都是挪威语，所以可能会有点混乱。它应该是一种电影注册，我知道它可能在我的代码中有很多错误，但是我现在想要解决的问题是悬停和活动:)悬停不能覆盖整个文本

这是我的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

悬停不能覆盖整个文本

回答

相关问题