javascript - 为什么悬停 li 元素会改变它们在鼠标悬停和鼠标移出时的位置？

Question

我尝试在鼠标悬停时突出显示一个 li 元素，同时隐藏其他 li 元素。脚本工作正常。但是在鼠标悬停时，元素“某物”开始改变它的位置，所以他摆脱了鼠标光标触发 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";

函数 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

使用“可见性:隐藏”而不是“显示:无”。这样元素不会被渲染，但它们仍然存在。