将 onmouseover 重定向到其他元素时出错

Question

我希望当我将鼠标移到 svg 上时，文本会向右移动，使其可见；但是它不起作用。会有什么问题？HTML:<div class="exitBox">                           <span class="exitButton"><?php include "SVGs/sair.svg"; ?></span>            <span class="exit"><a href="#" id="exitA">SAIR</a></span>                       </div>CSS：.exitBox{            display: inline;            position: fixed;            top: 20px;            left: 40px;            overflow: hidden;        }        .exitButton svg{            width: 20px;            color: black;        }        #exitA{            display: inline-block;            text-decoration: none;            color: black;            font-size: 30px;            letter-spacing: 2px;            font-family: Teko;            transform: translateX(-100px);        }脚本脚本：var exit = document.getElementById("exitA");        var exitB = document.getElementsByClassName("exitButton");                exitB.onmouseover = function exit(){            exit.style.transform = "translateX(100px)";          }

Answer 1

您对函数和退出元素使用相同的名称。

您将它从 -100px 移动到 100px，这意味着 200px，这会导致文本超出屏幕

var exitB = document.getElementsByClassName("exitButton")[0];

exitB.onmouseenter = function exit(){

      var exitA = document.getElementById("exitA");

      exitA.style.transform = "translateX(0)";  

}

.exitBox{

    display: inline;

    position: fixed;

    top: 20px;

    left: 40px;

    overflow: hidden;

}

.exitButton svg{

    width: 20px;

    color: black;

}

#exitA{

    display: inline-block;

    text-decoration: none;

    color: black;

    font-size: 30px;

    letter-spacing: 2px;

    font-family: Teko;

    transform: translateX(-100px);

}

<div class="exitBox">               

    <span class="exitButton"><div>hover</div></span>

    <span class="exit"><a href="#" id="exitA">SAIR</a></span>               

</div>