                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /DOM事件探秘

鼠標滑過離開都改不了顏色

<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>下拉菜單</title>

<style?type="text/css">
??body,ul,li{?margin:0;?padding:0;?font-size:13px;}
??ul,li{list-style:none;}
??#divselect{width:186px;?margin:80px?auto;?position:relative;?z-index:10000;}
??#divselect?cite{width:150px;?height:24px;line-height:24px;?display:block;?color:#807a62;?cursor:pointer;font-style:normal;
??padding-left:4px;?padding-right:30px;?border:1px?solid?#333333;?
??background:url(p1.jpg)?no-repeat?right?center;}
??#divselect?ul{width:184px;border:1px?solid?#333333;?background-color:#ffffff;?position:absolute;?z-index:20000;?margin-top:-1px;?display:none;}
??#divselect?ul?li{height:24px;?line-height:24px;}
??#divselect?ul?li?a{display:block;?height:24px;?color:#333333;?text-decoration:none;?padding-left:10px;?padding-right:10px;}

</style>

???<script?type="text/javascript">

window.onload=function(){
var?box=document.getElementById('divselect'),
???title=box.getElementsByTagName('cite')[0],
???menu=box.getElementsByTagName('ul')[0],
???as=box.getElementsByTagName('a'),
??????index=-1;
???
????//?點擊三角時,顯示菜單
????title.onclick=function(e){
??????//?執行腳本
???????e=e||window.event;//瀏覽器兼容
???????menu.style.display='block';
???????if(e.stopPropagation){
??????????e.stopPropagation();
???????}else{
????????e.cancleBubble=true;
???????}
????}??
????
???//?滑過滑過、離開、點擊每個選項時
???for(var?i=0;i<menu.length;i++){

????as[i].onmouseover=function(){
??????this.style.background='#112233';//this！
????}

????as[i].onmouseout=function(){
??????this.style.background="#fff";
????}

????as[i].onclick=function(e){
?????e=e||window.event;
?????if(e.stopPropagation){
??????e.stopPropagation();
?????}else{
??????e.cancleBubble=true;
?????}
?????menu.style.display='none';
?????title.innerHTML=this.innerHTML;
????}
???}



???//?點擊頁面空白處時,收回菜單
????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>