Maison > interface Web > tutoriel HTML > css鼠标经过菜单变色_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-21 09:28:22
original
1788 Les gens l'ont consulté

<!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>
Copier après la connexion




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

谢谢  我明白了

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal