css鼠标经过菜单变色_html/css_WEB-ITnose-html教學-PHP中文網

css鼠标经过菜单变色_html/css_WEB-ITnose

WBOY

發布： 2016-06-21 09:28:22

原創

1717 人瀏覽過

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#navigation{	width:200px;	font-family:Arial,		}	#navigation ul{		 list-style-type:none;		 margin:0px;		 padding:0px;		 				}		#navigation ul li{			border-bottom:1px solid #ed9f9f;									}#navigation ul li a{	 display:block;	 padding:5px 5px 5px 0.5em;	 text-decoration:none;	 border-left:12px solid #711515;	 border-right:1px solid #711515;		}			body{		 background-color:#FFC;		}#navigation li a:link,#navigation li a:visited{		background-color:#c11136;		 color:#ffffff;}#navigation li a:hover{					/* 鼠标经过时 */     	background-color:#990020;			/* 改变背景色 */	color:#ffff00;						/* 改变文字颜色 */}</style></head><body><div id="navigation"> <ul>  <li><a href="#">Home</a></li>    <li><a href="#">My Blog</a></li>      <li><a href="#">Friends</a></li>        <li><a href="#">Next Station</a></li>          <li><a href="#">Contact Me</a></li></div></body></html>

登入後複製

#navigation li a:link,#navigation li a:visited{
background-color:#c11136;
color:#ffffff;
}
这段我写成这样
#navigation ul li a:link,#navigation ul li a:visited{
background-color:#c11136;
color:#ffffff;
}
（注意 li前面多了一个ul）为什么就无法实现菜单变色效果？指定ul标签下li 中a鼠标经过事件这么表达没错吧？为什么不无法实现？

回复讨论(解决方案)

楼主你的代码复制下来并没有你说的问题，A标签伪连接属性正常啊。

把
#navigation li a:link,#navigation li a:visited{
background-color:#c11136;
color:#ffffff;
}
改写成
#navigation ul li a:link,#navigation ul li a:visited{
background-color:#c11136;
color:#ffffff;
}

你下面的伪连接属性也要加上ul。

谢谢我明白了