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
  • Вопрос задан
  • 195 просмотров
Решения вопроса 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 и в конце скролла удалять этот стиль
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
19 июн. 2024, в 01:11
7000 руб./за проект
18 июн. 2024, в 23:10
15000 руб./за проект