Как отменить hover?

Question

[gazes12]

https://codepen.io/gazes12/pen/ZEvgPqa

item с классом main должен иметь псевдоэлемент без hover:


Как это сделать? Можно ли как то отменить событие hover у элемента с классом current?

Comments

[Ankhena]

Можно.
Можно добавлять hover всем кроме current
:not

[gazes12]

Ankhena, Я правильно задал?

.nav__item {
    position: relative;
    padding-top: 9px;

    &:hover:not(.nav__item--current){
        &::after{
            height: 8px;
        }
    }

    &::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 0px;
        top: 0;
        left: 0;
        background: red;
        transition: all .3s linear;
    }

    &.current{
        &::after{
            background: #1bf;      
        }
    }
}

[Ankhena]

gazes12, нет.
Во-первых, нет элемента с .nav__item--current, у вас current это отдельный класс, а не модификатор.
Во-вторых, у ховера не может быть :not, он у селектора.
Вы можете самостоятельно в этом убедиться, открыв скомпилированный css. И просто в браузере.

Должно выйти так:
.item:not(.current):hover {}

[Сергей Сергей]

просто добавить в конце

.nav:hover .current::after{
  height: 0;
}
.nav .current::after, .nav .current:hover::after{
  height: 8px;
}

[Ankhena]

Можно и без :not так, всё равно ведь псевдо задаете.

.nav__item {
  position: relative;
  padding-top: 9px;
  &:hover {
    &::after {
      height: 8px;
    }
  }

  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0px;
    top: 0;
    left: 0;
    background: gray;
    transition: all 0.3s linear;
  }

  &.current {
    &::after {
      background: #000;
      height: 8px;
    }
  }
}

Answer 1

[Сергей Т]