Эффекты наведения при помощи сенсорных событий CSS3 - PullRequest
Новая
       10

Эффекты наведения при помощи сенсорных событий CSS3

38 голосов
/ 30 ноября 2011

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

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

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

Ответы [ 2 ]

70 голосов
/ 26 октября 2012

Используйте псевдокласс :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>

Следующие правки больше не актуальны, потому что я удалил исходные, неправильные инструкции, но еслиВы были здесь до того, как они все еще могут быть полезны1016 * тег.Таким образом, ваш тег body должен выглядеть следующим образом <body ontouchstart="">, а ваши ссылки выглядят следующим образом 

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

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

6 голосов
/ 06 сентября 2013

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

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