html js鼠标样式,js跟css控制鼠标略过和点击后的样式<转帖&gt

当前位置:我的异常网» HTML/CSS » js跟css控制鼠标略过和点击后的样式

js跟css控制鼠标略过和点击后的样式

www.myexceptions.net  网友分享于：2013-10-26  浏览：92次

js和css控制鼠标略过和点击后的样式

临时写了一个  可能不是最好的  但你说的功能基本实现了

document.onreadystatechange=function()     //当页面状态改变时执行函数

{

if(document.readyState == "complete")         //当页面加载状态为完成时执行条件内容

{

var li = document.getElementsByTagName("li");  //获取页面所有li节点

for(var i=0;i

{

li[i].οnclick=function(){                                         //为循环的li节点绑定 onclick事件

for(var j=0;j

{

li[j].style.backgroundColor="#FFF";                  //将所有li背景颜色修改

this.style.backgroundColor="#C0F";                //将当前点击的li背景颜色修改

}

}

}

}

}

• 測試1
• 測試2
• 測試3
• 測試4
• 測試5
• 測試6

刚没注意你还要滑过的效果  以下是全部效果 其实思路都是一样 只是绑定的事件不一样而已

document.onreadystatechange=function()  //当页面状态改变时执行函数

{

if(document.readyState == "complete") //当页面加载状态为完全结束时进入

{

var li = document.getElementsByTagName("li");

for(var i=0;i

{

li[i].οnclick=function(){                        //为循环的li节点绑定 onclick事件 也就是点击事件

for(var j=0;j

{

li[j].style.backgroundColor="#FFF";

this.style.backgroundColor="red";

}

}

li[i].οnmοusemοve=function(){      //为循环的li节点绑定onmousemove事件也就是鼠标移上事件

for(var j=0;j

{

if(this.style.backgroundColor != "red")  //这里就判断改li标签是否被点击 如果点击就不改变颜色

{

this.style.backgroundColor="#C0F";

}

}

}

li[i].οnmοuseοut=function(){       ///为循环的li节点绑定onmouseout事件也就是鼠标移走事件

for(var j=0;j

{

if(this.style.backgroundColor != "red")       //这里就判断改li标签是否被点击 如果点击就不改变颜色

{

this.style.backgroundColor="#FFF";

}

}

}

}

}

}

• 測試1
• 測試2
• 測試3
• 測試4
• 測試5
• 測試6

文章评论