效果在菜單中懸停

Question

我希望li項目的文字顏色在其懸停時發生變化。目前只有當li中的<a>懸停時纔會更改。如何解決它？

#menu { 
 
\t margin-top: 10px; 
 
} 
 

 
#menu li { 
 
\t line-height: 32px; 
 
\t width: 100%; 
 
\t color: #565656; 
 
\t border-bottom: 1px solid #e1e1e1; 
 
} 
 

 
#menu li a { 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-weight: 400; 
 
\t font-size: 13px; 
 
\t text-decoration: none; 
 
\t color: #565656; 
 
} 
 

 
#menu li a:hover { 
 
\t color: #FFF; 
 
} 
 

 
#menu li:hover { 
 
\t background-color: #c0392b; 
 
\t color: #FFF; 
 
}

<ul id="menu"> 
 
      \t <li><a href="#">Strona główna</a></li> 
 
       <li><a href="#">Historia szkoły</a></li> 
 
       <li><a href="#">Absolwenci</a></li> 
 
       <li><a href="#">Dokumenty szkoły</a></li> 
 
       <li><a href="#">Ewaluacja wewnętrzna</a></li> 
 
       <li><a href="#">Zasady rekrutacji</a></li> 
 
       <li><a href="#">Nauczyciele</a></li> 
 
       <li><a href="#">Samorząd Uczniowski</a></li> 
 
       <li><a href="#">Rada Rodziców</a></li> 
 
       <li><a href="#">Kierunki i wychowawcy klas</a></li> 
 
       <li><a href="#">Kalendarz roku szkolnego</a></li> 
 
       <li><a href="#">Profilaktyka</a></li> 
 
       <li><a href="#">Kalendarz imprez i uroczystości</a></li> 
 
       <li><a href="#">Olimpiady, konkursy, zawody</a></li> 
 
       <li><a href="#">Koła zainteresowań</a></li> 
 
       <li><a href="#">Matura</a></li> 
 
       <li><a href="#">Egzamin zawodowy</a></li> 
 
      
 
      </ul>

Answer 1

變化：

#menu li a:hover { 
    color: #FFF; 
} 

要：

#menu li:hover a { 
    color: #FFF; 
} 

Answer 2

如果您還需要li項目點擊，您可以通過添加下面的代碼實現這一點：

#menu li a { 
    display: block; 
} 

Answer 3

的文本只顯示了在白色的，當你將鼠標懸停在鏈接踏歌：<a>，而不是整個列表項<li>。

我認爲一個更好的方法來解決這個問題是使鏈接塊元素，填充整個列表項空間。如果人們將鼠標懸停在列表上的任何位置，他們不僅會看到白色文字，還可以點擊該項目的任何位置。

這裏有一個返工：

#menu { 
 
\t margin-top: 10px; 
 
} 
 

 
#menu li { 
 
\t list-style:none; 
 
} 
 

 
#menu li a { 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-weight: 400; 
 
\t font-size: 13px; 
 
    \t  \t padding:5px; 
 
\t text-decoration: none; 
 
\t line-height: 22px; 
 
\t width: 100%; 
 
\t color: #565656; 
 
\t border-bottom: 1px solid #e1e1e1; 
 
\t display:block; 
 
} 
 
#menu li a:hover { 
 
\t background-color: #c0392b; 
 
\t color: #FFF; 
 
}

<ul id="menu"> 
 
      \t <li><a href="#">Strona główna</a></li> 
 
       <li><a href="#">Historia szkoły</a></li> 
 
       <li><a href="#">Absolwenci</a></li> 
 
       <li><a href="#">Dokumenty szkoły</a></li> 
 
       <li><a href="#">Ewaluacja wewnętrzna</a></li> 
 
       <li><a href="#">Zasady rekrutacji</a></li> 
 
       <li><a href="#">Nauczyciele</a></li> 
 
       <li><a href="#">Samorząd Uczniowski</a></li> 
 
       <li><a href="#">Rada Rodziców</a></li> 
 
       <li><a href="#">Kierunki i wychowawcy klas</a></li> 
 
       <li><a href="#">Kalendarz roku szkolnego</a></li> 
 
       <li><a href="#">Profilaktyka</a></li> 
 
       <li><a href="#">Kalendarz imprez i uroczystości</a></li> 
 
       <li><a href="#">Olimpiady, konkursy, zawody</a></li> 
 
       <li><a href="#">Koła zainteresowań</a></li> 
 
       <li><a href="#">Matura</a></li> 
 
       <li><a href="#">Egzamin zawodowy</a></li> 
 
      
 
      </ul>