1.要出现的效果：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色
<style type="text/css">
#wai{
width:50px;
height:60px;}
.li{
width:50px;
height:30px;
background-color:#0F0;
border:1px solid #F00;}
</style>
<body>
<div id="wai">
<div class="li" onclick="Dian(this)" onmouseover="Yi(this)" onmouseout="Zou()">日本</div>
<div class="li" onclick="Dian(this)" onmouseover="Yi(this)" onmouseout="Zou()">韩国</div>
</div>
<script type="text/javascript">
function Dian(a)
{
/*要出现的效果：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色*/
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
li[i].removeAttribute ("bs") ; /* 清除他的属性的目的是让其点击的时候，这个属性在此函数中不起任何的作用*/
li[i].style.backgroundColor = "#0F0";
}
a.setAttribute ("bs",1); /*bs想表示的是有没有选中 */
a.style.backgroundColor = "red";
}
function Yi(b)
{
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
if(li[i].getAttribute("bs")!= "1" ) /*已经点击一个框时，又移到别的框时，移上的时候给个判断，先获得bs这个属性，这个框依旧是绿色的。
*/
{
li[i].style.backgroundColor = "#0F0";
}
}
b.style.backgroundColor = "red";
}
function Zou()
{
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
if(li[i].getAttribute("bs")!= "1" ) /*如果不进行点击的话，移出时就恢复为以前的绿色，*/
{
li[i].style.backgroundColor = "#0F0";
}
}
}
</script>
效果的图：
总结：这个题里面涉及到的问题是，为何添加这个属性，如果单用点击事件和放上的话，放上时，确实都会变成红色，但是如果选中
一个，再放上其他的也会变红，想实现的效果是：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色。不进行点击，就只执行放上和移出，点击了之后，屏蔽了移上和移出的功能，移出整个框
时点击的还是红色。
原文：http://www.cnblogs.com/zuo72/p/7742789.html