のCss：タッチデバイスのためのイベント「クリック」することなく、ホバー

Question

はのは、私は、このHTML構造を持っているとしましょう：

<div className="big-square"> 
    <div className="small-button">button</div> 
</div> 

私は.big-square:hover上のボタンを表示する必要があります。それは簡単ですが、タッチデバイスはどうですか？単に.big-square:hover CSSルールを使用すると、ユーザーが誤ってボタンの位置をクリックすると、ボタンが表示され、すぐにクリックされます。私はこのような状況を避けたい。その他のトランジションを使用しようとしましたが、これはうまくいきません。それが簡単に理解し、答えることにする。ここ

たとえば、：
https://jsfiddle.net/hznjb8ur/

jQueryの単純化のためにそこにあります。私はjqueryやjsの使用も避けたいのですが、これは1ページに数十、数百の要素があるので、単純なCSSトリックでこれを解決する方がいいでしょう。

Answer 1

:hoverは、タッチデバイスではサポートされていません。 :hover機能は、タッチスクリーン上でクリックすると有効になります。

ボタンを非表示にする代わりにタッチデバイスに表示しないのはなぜですか？ それ以外の場合は、jqueryのみお手伝いできます。

Answer 2

実際の「タッチ可能」デバイスは、画面がポインタ（指など）の位置を知らないため、ホバーをサポートしていません。

Microsoftが実際に多分近い将来、私たちはその行動を見ることができるhttp://www.theverge.com/2016/5/5/11595564/microsoft-3d-touch-kinect-gestures-windows-phonesに取り組んでいる