首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-10-25 
js和css控制鼠标略过和点击后的样式转帖临时写了一个可能不是最好的但你说的功能基本实现了 script lan

js和css控制鼠标略过和点击后的样式<转帖>
临时写了一个  可能不是最好的  但你说的功能基本实现了



<script language="javascript">
document.onreadystatechange=function()     //当页面状态改变时执行函数
{
if(document.readyState == "complete")         //当页面加载状态为完成时执行条件内容

{
  var li = document.getElementsByTagName("li");  //获取页面所有li节点
  for(var i=0;i<li.length;i++)                                     //循环li节点
  {
   li[i].onclick=function(){                                         //为循环的li节点绑定 onclick事件
    for(var j=0;j<li.length;j++)
    {
     li[j].style.backgroundColor="#FFF";                  //将所有li背景颜色修改
     this.style.backgroundColor="#C0F";                //将当前点击的li背景颜色修改
    }
   }
  }
}
}
</script>
<ul>
<li>測試1</li>
<li>測試2</li>

<li>測試3</li>
<li>測試4</li>

<li>測試5</li>
<li>測試6</li>
</ul>

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



////////////////////////////////////////////////////////////////////////////////////



<script language="javascript">
document.onreadystatechange=function()  //当页面状态改变时执行函数
{
if(document.readyState == "complete") //当页面加载状态为完全结束时进入
{
  var li = document.getElementsByTagName("li");
  for(var i=0;i<li.length;i++)
  {
   li[i].onclick=function(){                        //为循环的li节点绑定 onclick事件 也就是点击事件
    for(var j=0;j<li.length;j++)
    {
     li[j].style.backgroundColor="#FFF";   
     this.style.backgroundColor="red";
    }
   }
  
   li[i].onmousemove=function(){      //为循环的li节点绑定onmousemove事件也就是鼠标移上事件
    for(var j=0;j<li.length;j++)
    {
     if(this.style.backgroundColor != "red")  //这里就判断改li标签是否被点击 如果点击就不改变颜色
     {     
      this.style.backgroundColor="#C0F";
     }
    }
   }
  
   li[i].onmouseout=function(){       ///为循环的li节点绑定onmouseout事件也就是鼠标移走事件
    for(var j=0;j<li.length;j++)
    {
     if(this.style.backgroundColor != "red")       //这里就判断改li标签是否被点击 如果点击就不改变颜色
     {
      this.style.backgroundColor="#FFF";
     }
    }
   }
  }
}
}
</script>
<ul>
<li>測試1</li>
<li>測試2</li>

<li>測試3</li>
<li>測試4</li>

<li>測試5</li>
<li>測試6</li>
</ul>

热点排行