日期:2014-05-16  浏览次数:20423 次

js效果
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
<div>弹出层</div>

需要的效果是,鼠标移入aa背景变红色,鼠标移入div层背景色不会消失,在移入bb,aa背景色就消失。
------解决方案--------------------

<script>
function mov(li){
    var ul = li.parentNode;
    li.style.background="red";
    for(var k=0;k<ul.childNodes.length;k++){
        if(li!=ul.childNodes[k]){
            ul.childNodes[k].style.background=""
        }
    }
}
</script>

<ul>
<li onmouseover=mov(this)>aa</li>
<li onmouseover=mov(this)>bb</li>
<li onmouseover=mov(this)>cc</li>
</ul>
<div>弹出层</div>


------解决方案--------------------
楼上的写的有点问题,正确代码如下,亲测有效。
<!DOCTYPE html>
<html>
<body>

<script>
function mov1(){
    var li=document.getElementById("a");
    li.style.background="red";
    var lio=document.getElementById("b");
    lio.style.background="white";
var lioo=document.getElementById("c");
    lioo.style.background="white";
    }
function mov2(){
var li=document.getElementById("b");
    li.style.background="red";
var lio=document.getElementById("a");
    lio.style.background="white";
var lioo=document.getElementById("c");
    lioo.style.background="white";
    }
function mov3(){
var li=document.getElementById("c");
    li.style.background="red";
var lio=document.getElementById("b");
    lio.style.background="white";
var lioo=document.getElementById("a");
    lioo.style.background="white";
    }
</script>
 
<ul>
<li id="a" onmouseover=mov1()>aa</li>
<li id="b" onmouseover=mov2()>bb</li>
<li id="c" onmouseover=mov3()>cc</li>
</ul>
<div>弹出层</div>

</body>
</html>

------解决方案--------------------


<script>
function mov(li){
    var ul = li.parentNode;
    li.style.background="red";
    var lis = ul.getElementsByTagName("li");
    for(var k=0;k<lis.length;k++){
        if(li!=lis[k]){
            lis[k].style.background="white"
        }
    }
}
</script>

<ul>
<li onmouseover=mov(this)>aa</li>
<li onmouseover=mov(this)>bb</li>
<li onmouseover=mov(this)>cc</li>
</ul>
<div>弹出层</div>




处理了一下兼容性问题