タッチデバイスでもhover効果をつける方法

○CSSの:hoverがスマホで効かない

hoverで何か効果をつける時に:hoverを使うと思いますが、タッチデバイスで:hoverをつけた要素を触っても反応しなかったり、アンカータグの場合は一度タップした時に:hover効果が出て、もう一度タップするとリンク先に飛ぶというように意図した結果にならないことが多いです。

例えば、下のサンプルはPCでは問題ないですが、スマホだと反応しないものが多いはずです。

http://dev.acc-test.net/members/yasuhara/hover/

そこで、、、

Javascriptでhover効果をつけることで、解決します。

手順①

hover効果をつけたい要素のcssに.hoverをつけます

○CSS

.aaa.hover { background:#000; }

すでに:hoverをつけている場合は:hoverを.hoverに変えれば良いです。

手順②

hover効果をつけたい要素の上にマウスのポインターを載せたり、タッチデバイスで要素の上に指を載せたりした時に、hover効果をつけたい要素に.hoverをつけ、離した時に.hoverをとるコードを書きます。

○Javascript

 $('.aaa').on('touchstart mouseenter', function(){
    $(this).addClass( 'hover' );
 }).on('touchend mouseleave', function(){
    $(this).removeClass( 'hover' );
 });

以上でスマホでもPCと変わらず意図したhover効果をつけることができます。

サンプル
http://dev.acc-test.net/members/yasuhara/hover/index-js.html