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

Question

[tekkenot95]

.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

Answer 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 и в конце скролла удалять этот стиль

Comments

[tekkenot95]

https://habr.com/ru/post/204238/

[Максим]

tekkenot95, ага)