Home >Web Front-end >HTML Tutorial >css鼠标经过菜单变色_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-21 09:28:221788browse

<!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。

谢谢  我明白了

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn