為什么鼠標(biāo)滑過時顏色不改變？<!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開發(fā)</a></li>? ? ? ? ?<li><a href="javascript:;" selectid="2">.NET開發(fā)</a></li>? ? ? ? ?<li><a href="javascript:;" selectid="3">PHP開發(fā)</a></li>? ? ? ? ?<li><a href="javascript:;" selectid="4">Javascript開發(fā)</a></li>? ? ? ? ?<li><a href="javascript:;" selectid="5">Java特效</a></li>? ? ? </ul>? ? </div></body></html>
JavaScript事件練習(xí)問題
kx00012kx
2016-08-04 16:35:45
