イメージの表示と非表示にCSS3のホバーとトランジションを使用しています。モバイルデバイスでは、タッチイベントに同じ遷移を使用したいと考えています。CSS3タッチイベントを使用したホバーエフェクト
基本的に、最初のタッチはホバー効果またはロールオーバーを実行し、タッチアップはロールオフを実行します。
これを行うにはJavaScriptを使用しないようにしてください。最良の選択肢となる純粋なCSS3でそれを行う方法がある場合。
cssに:active疑似クラスを使用し、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>
（PC上）で推移か、（タッチデバイス上で）下に開催されたときに小さくなり、白い輝きのボタンを持って、自分のサイトから抜粋されます私は、元の、間違った指示を削除していないが、あなたがここにいたならば、これらはまだ
EDIT役立つかもしれない前に、もはや関連するので：私は、各リンクにontouchstart=""を置くのではなく、場合には、より信頼性の高い作品を発見しました、 <body>タグに入れてください。だからあなたのbodyタグはこの<body ontouchstart="">のようになりますし、あなたのリンクは、この
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDITように見える2：私は、というあなたのCSSをコピーし、デスクトップの画面サイズのクエリを使用するのではなく、ただのonmouseover `追加考え出しました= ""をbodyタグにも渡すので、：active疑似クラスはデスクトップ上でマウスによって呼び出され、モバイル上ではタッチによって呼び出されます。あなたがこれを行うならば、あなたはちょうどメディアクエリについての散歩を無視することができます。
thx、私のために働く。 – Mario
これは機能します。ありがとう。しかし、なぜ* * ontouchstart = ""とonmouseover = ""の理由についての説明が好きです。確かに私に自明ではない。 –
さて、私はこれを説明するのに最善の人ではないかもしれませんが、理解しているのはこれです：ontouchstartとonmouseoverはリスナーです。問題の要素が触れられたりマウスオーバーしたり（この場合）引用符の中にあるjavascript関数。私たちの場合、引用符は空のままにしておいたので、スクリプトは実行されませんでしたが、リスナーが存在するため、Webブラウザはそれらをアクティブと見なします。 ：active擬似クラスは、現在javascriptでアクティブな要素に適用されます。リスナーによって、：アクティブな擬似クラスが適用されます。 –
あなたのHTMLコードを変更したくない場合、あなたはこの試みることができる：
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
これは機能しません。 – matthewpavkov
@matthewpavkovそれは動作しますが、addEventListenerではなくaddEventListenerでなければなりません。 –
をあなたが質問している実際にはかなり曖昧です。あなたが*どちらの方法でどうやってそれをするのか尋ねているのか、それともCSSだけでもできるのかどうかは分かりません。 – rlemon
*あなたの質問;-) –
[：active疑似クラスの可能な複製は動作しません。モバイルサファリ]（https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari） – JakeGould