Эффекты наведения с использованием событий Touch3

Я использую наведение и переходы CSS3 для отображения и скрытия изображения. На мобильных устройствах я хотел бы использовать один и тот же переход для событий касания.

В принципе, первое касание будет выполнять эффект наведения или опрокидывание, и прикосновение будет выполнять скатывание.

Я хотел бы избегать использования JavaScript для этого. Если есть способ сделать это с помощью чистого CSS3, это будет лучший вариант.

Ответы

Ответ 1

Используйте псевдо-класс :active в вашем css, затем добавьте теги ontouchstart="" и onmouseover="" в тег body.

Следующий код извлекается из моего сайта, в котором у меня есть кнопки, которые становятся меньше и светятся белыми, когда они зависают (на ПК) или удерживаются (на сенсорных устройствах).

<style>
.boxbutton:active{
    -webkit-transform:scale(0.9); 
    -moz-transform:scale(0.9); 
    -ms-transform:scale(0.9); 
    -o-transform:scale(0.9); 
    transform:scale(0.9); 
    -webkit-box-shadow:0px 0px 20px #FFF; 
    -moz-box-shadow:0px 0px 20px #FFF; 
    -o-box-shadow:0px 0px 20px #FFF; 
    box-shadow:0px 0px 20px #FFF; 
}
</style>


<body ontouchstart="">
    <a href="#teamdiv">
        <div class="boxbutton" id="teambb">
            <h5>Team</h5>
        </div>
    </a>
</body>

Следующие изменения больше не актуальны, потому что я удалил оригинальные неверные инструкции, но если вы были здесь до этого, они могут быть полезны

EDIT: Я обнаружил, что он работает более надежно, если вместо того, чтобы помещать ontouchstart="" в каждую ссылку, поместите его в тег <body>. Итак, ваш тег тела должен выглядеть следующим образом <body ontouchstart="">, и ваши ссылки выглядят как

<a href="#teamdiv">
    <div class="boxbutton" id="teambb">
    <h5>Team</h5>
  </div></a>

EDIT 2: Я выяснил, что вместо копирования вашего CSS и использования запросов размера экрана для рабочего стола просто добавьте `onmouseover = "" в тег body также, так что: active pseudo класс будет вызываться мышью на рабочем столе и касанием на мобильном телефоне. Если вы это сделаете, вы можете просто игнорировать бессвязные медиа-запросы.

Ответ 2

Если вы не хотите изменять свой HTML-код, вы можете попробовать следующее:

<script>
  document.body.addEventListener('touchstart',function(){},false);
</script>