メニュー内の効果ホバー

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>