js实现鼠标滑动隐藏层或改变背景特效

<script>

function c_list(lid){     //参数是当前节点对象

   var lis=lid.parentNode.childNodes; //获取当前节点的父节点，再通过父节点获取当前节点的兄弟节点数组（父节点的子节点）

   for(var i=0;i<lis.length;i++){   //循环修改兄弟节点的className

     if(lis[i].nodeType != 1) continue; //为了兼容火狐，火狐会把空格也当成一个节点

     lis[i].className='mouse_out'; 

 }

   lid.className='mouse_on';   //单独设置当前节点的className

}

</script> 上文中红色字体段是后来加的，因为后来在用同样方法写一个效果的时候发现火狐不兼容，火狐会把空格也当成一个节点

解决方法1：if(lis[i].nodeType != 1) continue;屏蔽掉nodeType不是1（元素节点）的节点

解决方法2：if(lis[i].nodeName =="#text") continue;屏蔽文本节点

 

此函数使用是不用写id，下面附上html代码

<ul>

 <li class=mouse_on   οnmοusemοve="c_list(this)">

  <p class="p1">这是p1内容 LI1</p>

  <p class="p2">这是p2内容 LI1</p>

 </li>

 <li οnmοusemοve="c_list(this)">

  <p class="p1">这是p1内容 LI2</p>

  <p class="p2">这是p2内容 LI2</p>

 </li>

 <li οnmοusemοve="c_list(this)">

  <p class="p1">这是p1内容 LI3</p>

  <p class="p2">这是p2内容 LI3</p>

 </li>

 <li οnmοusemοve="c_list(this)">

  <p class="p1">这是p1内容 LI4</p>

  <p class="p2">这是p2内容 LI4</p>

 </li>

</ul>

这样就可以通过css控制p1  p2的内容样式了，比如默认P2隐藏，当鼠标滑过p1，则p2显示....

CSS代码就懒得写了.........

原文： http://www.software8.co/wzjs/Javascript/1037.html

测试火狐，ie，谷歌通用