125naroom / デザインするところ(会社)です。

【jQuery】スマホ、タブレットでhoverを有効にする

【jQuery】スマホ、タブレットでhoverを有効にする

jQueryを使う。
簡単に実装できるのでおすすめ。
タッチしたときに少しうるさく感じることもありますが。

サンプル

サンプルではaタグを指定。
PCのときと同じ動きをしてくれるというもの。
※タッチ = touchstart

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
  $( 'a') // aタグを指定
    .bind( 'touchstart', function(){ // タッチするとhoverが付与される
    $( this ).addClass( 'hover' );
  }).bind( 'touchend', function(){ // タッチが離れるとhoverが解除される
    $( this ).removeClass( 'hover' );
  });
});
</script>

関連記事

【CSS】タブレット、スマホ表示の時は:hoverを不要にする

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

センダイパルコ15th | 仙台PARCO
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)