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

Question

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

}

函数更改CSSOut（） {

    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

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