为什么鼠标滑过时颜色不改变？<!doctype html><html><head> <meta charset="UTF-8"> <title>下拉菜单</title><style type="text/css"> *{margin:0px;padding:0px;font:14px "微软雅黑" ;} #divselect ul li{list-style:none;} #divselect{width:200px; height:26px; position:relative; margin:80px auto; } #divselect cite{border:1px #666 solid; line-height:26px; width:180px; height:26px; display:block; padding:0px 10px; } #divselect ul{line-height:26px; border:1px solid #666; border-top:none; width:200px; display:none;} #divselect ul li{line-height:26px; height:26px;} #divselect ul li a{text-decoration:none; color:#333; line-height:26px; display:block; padding:0px 10px; width:180px; } #divselect cite:before{ content:''; position:absolute; right: 8px; bottom: 7px; width:0px; height:0px; border-width:4px; border-style: solid ; border-color: #888 transparent transparent transparent; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transform-origin: 50% 25%; -ms-transform-origin: 50% 25%; -moz-transform-origin: 50% 25%; -webkit-transform-origin: 50% 25%; -o-transform-origin: 50% 25%; }</style> <script type="text/javascript">window.onload=function(){ var box=document.getElementById('divselect') title=box.getElementsByTagName('cite')[0] menu=box.getElementsByTagName('ul')[0] select=box.getElementsByTagName('a') index=-1 title.onclick=function(event){ event=event || window.event; if(event.stopPropagation){ event.stopPropagation(); } else{ event.cancelBubble=true; } menu.style.display='block'; document.onkeyup=function(e){ e=e || window.event; for(var i=0;i<select.length;i++){ select[i].style.background='#ccc' } //如果按下了向下方向键 if(e.keyCode==40){ index++ if(index>=select.length){ index=0; } select[index].style.background='#ccc' } //如果按下了向上方向键 if(e.keyCode==38){ if(index<=0){ index=select.length } index-- select[index].style.background='#ccc' } //如果按下了回车键 if(e.keyCode==13 && index!=-1){ title.innerHTML=select[index].innerHTML; for(var i=0;i<select.length;i++){ select[i].style.background='none' } menu.style.display='none'; index=-1; } } } } //滑过滑过、离开、点击每个选项时 for(var i=0;i<select.length;i++){ select[i].onmouseover=function(){ this.style.background='#ccc'; } select[i].onmouseout=function(){ this.style.background='none'; } select[i].onclick=function(){ title.innerHTML=this.innerHTML; menu.style.display='none' }}//点击空白处时document.onclick=function(){ menu.style.display='none'} </script></head><body><div id="divselect"> <cite>请选择分类</cite> <ul> <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li> <li><a href="javascript:;" selectid="2">.NET开发</a></li> <li><a href="javascript:;" selectid="3">PHP开发</a></li> <li><a href="javascript:;" selectid="4">Javascript开发</a></li> <li><a href="javascript:;" selectid="5">Java特效</a></li> </ul> </div></body></html>
添加回答
举报
0/150
提交
取消