做这么一个效果 鼠标单击某个名字后变色，没选中的鼠标移动上去变色
首先布局这个效果，然后给每个表格添加单击事件onclick、鼠标放上事件onmousemove、鼠标移出事件onmouseout
容易把这几个事件弄混
???<head> ???????<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ???????<title>无标题文档</title> ???????<style type="text/css">*{margin:0px auto;padding:0px;}#da{width:100%;height:280px;}.xiao{width:100px;height:20px;background-color:#00F;border:1px solid #FFF;text-align:center;line-height:20px;vertical-align:middle;color:#FFF;}.xiao:hover{cursor:pointer;} ???????</style> ???</head> ???????<body> ???<div id="da"> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张海军</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张琦伟</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张胜国</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">继文楷</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张三</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">李四</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">王五</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">猎人但</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">狗剩</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">王八蛋</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">狗屎</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">滚蛋</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">哈喽</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">凯奇</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张海军</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张琦伟</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张胜国</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">继文楷</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张三</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">李四</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">王五</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">猎人但</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">狗剩</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">王八蛋</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">狗屎</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">滚蛋</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">哈喽</div> ???????<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">凯奇</div> ???????</div> ???</body>因为是class名 所有onclick="Dian(this)" onmousemove="Fang(this)"都有个this，意思是点击自身，因为class名都一样，加上this知道单击的是哪个
先单击事件的函数
???<script type="text/javascript">function Dian(a){var xiao=document.getElementsByClassName("xiao")for(var i=0; i<xiao.length;i++){xiao[i].style.backgroundColor="#00F"}a.style.backgroundColor="red";}单击变红，然后没有单击的循环变成原来的颜色
下一步写鼠标放上变色
???????????????function Fang(b){var xiao=document.getElementsByClassName("xiao")for(var i=0; i<xiao.length;i++){xiao[i].style.backgroundColor="#00F"}b.style.backgroundColor="red";}这样看着是没问题，实际效果上是只有鼠标放上变色效果，鼠标单击效果没有了。这是因为优先级的关系
所以要加虚拟属性，鼠标单击后添加属性，没有单击的移出这个属性
???????????????function Dian(a){var xiao=document.getElementsByClassName("xiao")for(var i=0; i<xiao.length;i++){xiao[i].removeAttribute("bs")//没有单击的就移出这个属性xiao[i].style.backgroundColor="#00F"}a.setAttribute("bs",1);//随便添加一个属性，和属性值a.style.backgroundColor="red";}function Fang(b){var xiao=document.getElementsByClassName("xiao")for(var i=0; i<xiao.length;i++){if(xiao[i].getAttribute("bs")!="1")//根据上面设定的，用if判断一下，只要属性不等于1的就是原来的颜色，
如果没有这个条件单击事件就不存在{xiao[i].style.backgroundColor="#00F"}}b.style.backgroundColor="red";}这样单击变色并且没单击的鼠标放上变色，但是鼠标移出后颜色还在所以要继续写鼠标移出后的函数，同样的是，用if判断添加的属性不等于一变回原来的颜色,目的是保证鼠标移出的时候，单击选中的不会因为鼠标移出而变色。因为鼠标单击的添加了个属性bs=1，移出变色的是bs不等于1的情况。
???????????????function Zou(){var xiao=document.getElementsByClassName("xiao")for(var i=0; i<xiao.length;i++){if(xiao[i].getAttribute("bs")!="1")//如果没有这个条件，单击的效果也是不存在的。{xiao[i].style.backgroundColor="#00F"}}} ???</script>具体效果如同电脑QQ好友里选中某个好友之后，其余好友鼠标移动还有颜色变化
JS实例5
原文地址：http://www.cnblogs.com/navyouth/p/7740135.html