Элемент наведения, когда нет класса - PullRequest
Новая
       26

Элемент наведения, когда нет класса

0 голосов
/ 12 мая 2018

Я хочу добавить класс к элементу, наведя на него курсор только тогда, когда элемент не имеет активного класса. Его кнопка гамбургера, при наведении курсора две линии немного отходят друг от друга, при щелчке они пересекают друг друга, и когда я наведите 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;
        }
    }
}

}

...