Question

我尝试在鼠标悬停时突出显示一个li元素，同时隐藏其他li元素。脚本运行正常。但是鼠标悬停在元素上的东西＆＃34;开始改变它的位置，所以他离开鼠标光标触发onmouseout脚本，这会将它的位置再次更改为默认值。这导致疯狂的循环。如何在不改变第一个元素位置的情况下隐藏a，b等元素？

这是html代码：

<li><a href="#" id ="something" onmousemove="changeCSSIn()" onmouseout = "changeCSSOut()" >something</a></li>
<li> id ="a"...</li>
<li> id ="b"...</li>
<li> id ="c"...</li>

这是剧本：

function changeCSSIn (){


    var something;
    var a;
    var b;
    var c;



    something = document.getElementById('something');
    a = document.getElementById('a');
    c = document.getElementById('b');
    d = document.getElementById('c');


    something.style.color = "red";
    a.style.display = "none";
    b.style.display = "none";
    c.style.display = "none";

}

function changeCSSOut（）{

    var something;
    var a;
    var b;
    var c;



    something = document.getElementById('something');
    a = document.getElementById('a');
    c = document.getElementById('b');
    d = document.getElementById('c');


    something.style.color = "#DBDBDB";
    a.style.display = "initial";
    b.style.display = "initial";
    c.style.display = "initial";

}

Answer 1

使用'visibility：hidden'而不是'display：none'。这样，元素将不会被渲染，但它们仍然存在。

为什么徘徊在li元素会改变他们在onmouseover和onmouseout上的位置？

1 个答案: