web-dev-qa-db-ja.com

CSS3タッチイベントを使用したホバー効果

CSS3ホバーとトランジションを使用して、画像の表示と非表示を切り替えています。モバイルデバイスでは、タッチイベントに同じトランジションを使用したいと思います。

基本的に、最初のタッチでホバー効果またはロールオーバーが実行され、タッチアップでロールオフが実行されます。

これを行うためにJavaScriptを使用することは避けたいと思います。純粋なCSS3でそれを行う方法があれば、それが最良の選択肢です。

cssmobilecss3css-transitions
39
mattwallace

使用 :active cssの擬似クラス、次にontouchstart=""およびonmouseover=""をbodyタグに。

次のコードは私のサイトから抜粋したもので、ホバリング（PC）またはホールド（タッチデバイス）すると小さくなり白く光るボタンがあります

<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>

次の編集は、元の誤った指示を削除したため、もはや関係ありませんが、これらの前にここにいた場合、まだ役に立つかもしれません

編集：ontouchstart=""各リンクで、<body>タグ。したがって、bodyタグはthis<body ontouchstart="">とリンクは次のようになります

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

編集2： CSSをコピーしてデスクトップの画面サイズクエリを使用するのではなく、 `onmouseover =" "をbodyタグに追加するだけで、：active疑似クラスがデスクトップのマウスとモバイルのタッチによって呼び出されます。これを行うと、メディアクエリに関するとりとめのないことを無視できます。

70
Chuck Dries

HTMLコードを変更したくない場合は、これを試すことができます：

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