将 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(){&nbsp; &nbsp; &nbsp; var exitA = document.getElementById("exitA");&nbsp; &nbsp; &nbsp; exitA.style.transform = "translateX(0)";&nbsp;&nbsp;}.exitBox{&nbsp; &nbsp; display: inline;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 20px;&nbsp; &nbsp; left: 40px;&nbsp; &nbsp; overflow: hidden;}.exitButton svg{&nbsp; &nbsp; width: 20px;&nbsp; &nbsp; color: black;}#exitA{&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: black;&nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; letter-spacing: 2px;&nbsp; &nbsp; font-family: Teko;&nbsp; &nbsp; transform: translateX(-100px);}<div class="exitBox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <span class="exitButton"><div>hover</div></span>&nbsp; &nbsp; <span class="exit"><a href="#" id="exitA">SAIR</a></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>