效果悬停在菜单中

时间:2016-07-24 08:27:42

标签: html css menu hover

我希望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>

3 个答案:

答案 0 :(得分:2)

变化:

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

要:

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

答案 1 :(得分:1)

如果您还需要#include<iostream> using namespace std; class VectorDouble { public: VectorDouble(int size); VectorDouble(const VectorDouble& source); ~VectorDouble(); friend ostream& operator << (ostream& outs, const VectorDouble& v);//this function is to output the entire vector to outs stream void push_back (double value); //mimics the function push_back private: double *ptr; int count, max_count; }; int main() { VectorDouble my_vec(2); my_vec.push_back(4.1); VectorDouble your_vec(my_vec); cout<<my_vec; cout<<your_vec; return 0; } VectorDouble::VectorDouble(int size):count(size),ptr(new double[count]),max_count(size+2) { for (int i=0;i<size;i++) { ptr[i]=0.0; } } VectorDouble::VectorDouble(const VectorDouble& source) { count=source.count; max_count=source.max_count; ptr=new double[count]; for (int i=0;i<count;i++) { ptr[i]=source.ptr[i]; } } VectorDouble::~VectorDouble() { delete []ptr; } ostream& operator << (ostream& outs, const VectorDouble& v) { for (int i=0;i<v.count;i++) { cout<<v.ptr[i]<<" "; } return outs; } void VectorDouble::push_back (double value) { VectorDouble temp(0); if (count==max_count) { temp.max_count=max_count*2; } temp.count=count+1; temp.ptr=new double[temp.count]; for (int i=0;i<count;i++) { temp.ptr[i]=ptr[i]; } temp.ptr[temp.count-1]=value; delete [] ptr; count=temp.count; max_count=temp.max_count; ptr=new double [count]; for (int i=0;i<count;i++) { ptr[i]=temp.ptr[i]; } } 项可点击,您可以通过添加以下代码来实现此目的:

li

答案 2 :(得分:0)

当您将鼠标悬停在链接标记<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>