效果在菜单中悬停

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>