error in redirecting onmouseover to other elements

I want that the moment I move my mouse over the svg, the text will shift to the right, making it visible; however it is not working. What would be the problem?

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);
        }

SCRIPT JS:

var exit = document.getElementById("exitA");
        var exitB = document.getElementsByClassName("exitButton");
        
        exitB.onmouseover = function exit(){
            exit.style.transform = "translateX(100px)";  
        }