没有类时的悬停元素

Question

我想通过仅在元素没有活动类时将鼠标悬停在元素上。它的汉堡按钮，悬停在两条线上时相互移动，点击它们相互交叉，当我悬停X时，线条再次移开，我不想这样做。我该怎么做 ？希望它足够清楚。

 $(document).ready(function () {
        $('.nav__menuButton').hover(function () {
            if (!$('.nav__menuButtonItem').hasClass('active'));
            $('.nav__menuButtonItem').addClass("hover");

        });
        $('.nav__menuButton').mouseleave(function () {
            $('.nav__menuButtonItem').removeClass("hover");

        });
        $('.nav__menuButton').click(function () {
            $('.nav__menuButtonItem').toggleClass('hover');


            $('.nav__menuButtonItem').toggleClass('active');
        })
    })

<section class="nav">
    <ul class="nav__menu">
        <li>
            <a href="HOME"></a>
        </li>
        <li>
            <a href="WORK"></a>
        </li>
        <li>
            <a href="ABOUT"></a>
        </li>
    </ul>
    <div class="nav__menuButton">
        <div class="nav__menuButtonWrapper">
            <span class="nav__menuButtonItem"></span>
            <span class="nav__menuButtonItem"></span>
        </div>
    </div>
</section>

.nav {
width: 100%;
&__menuButton {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
}
&__menuButtonWrapper {
    position: relative;
    margin-top: 13px;
    height: 20px;
}
&__menuButtonItem {
    display: block;
    height: 4px;
    width: 80%;
    margin: 4px;
    background: #fff;
    transition: 0.5s;
    &.active {
        &:nth-child(1) {
            transform: translateY(4px)rotate(35deg);
            transition: 0.5s;
        }
        &:nth-child(2) {
            transform: translateY(-4px)rotate(-35deg);
            transition: 0.5s;
        }
    }
    &.hover {
        &:nth-child(1) {
            transform: translatey(-5px);
            transition: 0.5s;
        }
        &:nth-child(2) {
            transform: translatey(5px);
            transition: 0.5s;
        }
    }
}

}