菜单中的效果悬停

Posted 2023-05-08

【中文标题】菜单中的效果悬停

【英文标题】：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 的颜色为白色

【参考方案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>