JavaScript事件练习问题
为什么鼠标滑过时颜色不改变？
<!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>
kx00012kx3回答
-
慕粉3456840
window.onload=function(){ 另一半括号放到</script>前for(var i=0;i<select.length;i++){ select[i].style.background='none'; }这里也改一下，颜色改为none -
田心枫
好像冒泡了 -
一杯2块的奶茶
select是undefind,select是根据box得到的，box是局部变量吧
随时随地看视频慕课网APP
相关分类
CSS3
Html5
JavaScript