菜单中的效果悬停答案

【问题标题】：Effect hover in menu菜单中的效果悬停
【发布时间】：2016-11-27 18:06:09
【问题描述】：

我希望 li 项目的文本颜色在悬停时发生变化。目前它只有在 li 中的<a> 悬停时才会改变。如何解决？

#menu {
	margin-top: 10px;
}

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

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

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

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

<ul id="menu">
            	<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>

【问题讨论】：

改变#menu li a :hover 的颜色为白色

标签： html css menu hover

【解决方案1】：

变化：

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

收件人：

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

【讨论】：

【解决方案2】：

如果您还需要li 项可点击，您可以通过添加以下代码来实现：

#menu li a { 
    display: block; 
}

【讨论】：

【解决方案3】：

仅当您将鼠标悬停在链接标签<a> 上时，文本才会以白色显示，而不是整个列表项<li>。

我认为解决此问题的更好方法是使链接成为块元素，填充整个列表项空间。如果人们将鼠标悬停在列表上的任意位置，他们不仅会看到白色文本，还可以单击项目上的任意位置。

这是一个返工：

#menu {
	margin-top: 10px;
}

#menu li {
	list-style:none;
}

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

<ul id="menu">
            	<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>

【讨论】：