tekkenot95
@tekkenot95

Как игнорировать: hover стиль css на тачпадах?

.background-box img {
    -webkit-transition: transform 1.5s ease-in-out;
    -o-transition: transform 1.5s ease-in-out;
    transition: transform 1.5s ease-in-out
}

.portfolio__item a:hover .background-box img,
.portfolio__item a:focus .background-box img,
.portfolio__item:active .background-box img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}


При скролле тачпада на ноуте, начинаются лаги из-за того что эффект scale(1.1), имеет transition: transform 1.5s ease-in-out.

Как сделать так чтоб при скролле на таче :hover не срабатывал, только при перемещение курсора по этому блоку, а к переходу следующему снова не срабатывал при скролле, только как снова пошевелишь курсором

Ведь лаги сильно ощутимые и зависят от времени transition
  • Вопрос задан
  • 149 просмотров
Решения вопроса 1
Я использую mixin для sass, чтобы hover вообще не применялся на устройствах с touch:

@mixin support-hover()
  @media (hover), (min-width:0\0), (min--moz-device-pixel-ratio:0)
    @content


Соответственно в него нужно поместить какой-либо блок с :hover

Пример использования:
@include support-hover()
  .link
      
    &:hover
      color: blue


А если нужно просто заблокировать hover во время скролла, то можно добавить к body (или к элементам, которые нужно заблокировать *) стиль pointer-events: none и в конце скролла удалять этот стиль
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы