javascript - 鼠标悬停在 margin-left 过渡后不起作用

Question

我正在为一家我刚创办的计算机公司开发网站，出于某种原因，在 margin-left 过渡为规范淡入腾出空间后，黑色外壳是只有一个鼠标悬停有效。银色和红色外壳的鼠标悬停停止工作，直到您单击 X 关闭规范。

网址是http://angryrhinocomputers.com

非常感谢任何帮助。

编辑:现在我看到黑色外壳没有褪色，它只是消失并重新出现。

Answer 1

嘿，首先你真的应该考虑使用类来更改 css 而不是 id。

尽量保持 id 不变，并提供在鼠标悬停/鼠标移出时更改的 div 类。

但是如果你想继续这种方式，你应该检查一下:

例如，当您尝试淡入银色外壳并淡出其余部分时，您可以使用此功能:

function selectSilver(){
    document.getElementById("umx2-black").id = "umx2-black-faded";
    document.getElementById("umx2-red").id = "umx2-red-faded";
    document.getElementById("c-silver").id = "c-silver-mo";
    document.getElementById("colors").id = "colors-mo";
}

但此时 "umx2-black" div 实际上是 id:"umx2-black-specs"

这就是我推荐使用类的原因，因为您可以向一个元素添加多个类。

...

所以更清楚:

• 当您打开规范时，您将黑色外壳的 ID 更改为“umx2-black-specs”；

• 当您将鼠标悬停在其余案例上时，您尝试将黑色案例的 ID 从“umx2-black”更改为“umx2-black-faded”

  问题是您正在寻找“umx2-black”而不是“umx2-black-specs”，这就是为什么您在上述函数中遇到错误。