【脱:擬似クラスhover】全デバイスでhoverイベントを安定させる方法

マウスで対象要素にホバーした時、簡単に色や大きさを変化させることができる便利なCSS擬似クラス:hover。

ですがCSSを使わずにhoverイベントを設定できる方が、デバイスに合わせた処理ができるため、CSS擬似クラス:hoverはあまりオススメしていません。

その理由と設定方法について解説します。

CSS擬似クラス【:hover】を使わなくなった理由

以前は擬似クラス【:hover】は非常に便利なCSSとして使用していました。

ですが一点のみ悩んでいた部分があります。

それはタブレットでの【:hover】の挙動です。

レスポンシブ対応にてホームページを制作する際に、PCサイト用のCSSとスマートフォン用のCSSは別々に記述しています。

<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width: 751px)">
<link rel="stylesheet" type="text/css" href="css/smart.css" media="screen and (max-width: 750px)">

しかし、このCSSの読み込み方法だとdesktop.cssはタブレットのサイズでも読み込まれてしまいます。

なのでPC用に作った【:hover】のCSSがタブレットでも反映されてしまいます。

タブレットは非常にコーディング側としては厄介なデバイスです。

サイズはPCに近く、操作性はスマートフォンに近い。

よってデザインはPC、操作性はスマートフォンという微妙な立ち位置にいます。

なおかつ、サイトの訪問率としてはタブレットからのアクセスは1%〜5％ほど。

見逃すことはできない数字ですが、それならば他の実装に時間をかけたいところです。

ですがPC用のCSSに【:hover】を記述すると、この擬似クラスがタブレットで悪さをします。

デバイスをタッチすると、擬似クラスhoverが発動し、タップしにくかったり、元のページに戻るとhoverが発動したまま色が変わっていたり、と。

気にする必要のない程度かもしれませんが、できるだけ細部に至るまできめ細やかに制作するため、少し目の上のたんこぶ的な存在でした。

一気にタブレットでだけ擬似クラスを無効化する方法も探したのですが、それも見当たらず。

ということで、一方から見れば非常に使い勝手のいい擬似クラス【:hover】ですが、タブレットという一点のみにおいて悩みとなっていました。

そういう経緯があり、他の方法でhoverイベントを設定することにしました。

脱CSS擬似クラス:hoverのための前提条件

1. CSS擬似クラス:hoverと同じように動作すること。
2. タブレット端末でも操作性を邪魔しない。
3. hoverイベントをスマホ・タブレット・PCで切り分けて設定できる。
4. 保守性が高い。

2〜4は重なる部分もありますが、簡単に設定できて変更した場合には一気に反映させることができるということです。

以上の4点からコーディング方法を検証していきました。

CSS擬似クラスを使わずにhoverイベントを設定してみる

結果からお伝えすると、jQueryによるhoverイベントの設定が上記の条件を全て満たし、かつ簡単にできるという結論に達しました。

では実際のコーディングでどう使っているかについての記述をしていきます。

まずはHTMLから

<div class=“btn”>
	<a class=“js_h” href=“https://prankplan.jp”>PrankPlanのコーポレートサイトです</a>
</div>

次にJavascript

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

まずdiv要素にbtnというクラス、その下のa要素にjs_hいうクラスをつけます。

jQueryで一行目にjs_hというクラスを指定

2行目はPCでマウスが要素に乗った時、またはタブレットでタッチした時に

3行目でhoverというクラスを付与します。

4行目でマウスが離れた時、タブレットでタッチが終わった時に

5行目でhoverというクラスを外します。

あとはCSSで指定していくだけです。

CSSの例

.btn a{
display:block;
padding:10px 20px;
background:#000;
color:#fff;
transition: .3s all;
}
.btn a.hover{
background:#fff;
color:#000;
}

というようにしてあげれば、

マウスがホバーした時にhoverクラスが付与され、0.3秒かけて背景が黒から白に、テキストが白から黒に変化します。

あくまで例なので、before要素を使ったりして、様々なアニメーションができます。

js_hというクラス名は自由に変更して大丈夫です。

あとはホバーイベントを設定したい要素にjs_hというクラスをつければホバー時にhoverというクラスがつくので、CSSでその動作を記述しておけば次々にhoverイベントを作っていうことができます。

これにより、タブレット端末でのホバーイベントは安定させることができましたし、ホバーイベントの部分にクリックイベントをつけたい場合には、ユーザーエージェントで振り分けて違う処理ができるので、コーディングがかなり簡単になりました。

コンテンツに関する質問やご要望は

Facebook

Twitter

より受け付けております。

お気軽にご質問ください。(内容によってはお答えできない場合もございます)