CSSのhoverをスマホにも対応させる簡単なやり方

CSSのhoverをスマホにも対応させる簡単なやり方

CSSのhoverをスマホにも対応させるやり方は「難しそうだな」と思いながら、どんなやり方があるのか調べてみると、簡単な2つのやり方があることを知りました。

忘れないうちにCSSのhoverをスマホにも対応させるやり方を記事にまとめたので少しでも参考になることがあればと思います。

 

CSSのhoverをスマホに対応する2つのやり方

 

ひとつはontouchstartを使用するやり方
もうひとつはjqueryでtouchstartを使用するやり方

の2つです。

ontouchstartを使用してCSSのhoverをスマホに対応するのが最も簡単なやり方で、次に簡単なのがtouchstartを使用するやり方です。

 

ontouchstartでhoverをスマホに対応

 

はじめにontouchstartでhoverをスマホに対応するやり方からです。

CSSでhoverを適用するHTMLの要素にontouchstartを属性として記述します。

 

<div class="mobile-hover">
    <ul>
        <li ontouchstart="">hover-1</li>
        <li ontouchstart="">hover-2</li>
        <li ontouchstart="">hover-3</li>
    </ul>
</div>

 

例えばHTMLでmobile-hoverというクラスを付与したdiv要素にulと3つのliをマークアップしたリストがあるとしたら、マークアップした3つのli開始タグにontouchstart=””を記述します。

 

.mobile-hover ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 0;
}

.mobile-hover li{
    width: 100%;
    max-width: 250px;
    background-color: #fff;
    color: #333;
    border: 3px solid #333;
    margin: 10px auto;
    padding: 15px 25px;
}

.mobile-hover li:hover{
    background-color: #333;
    color: #fff;
    border: 3px solid rgb(230, 225, 73);
}

 

あとはCSSでli要素にhoverを適用することで、スマホではontouchstartがタッチ操作に対応したホバー動作をしてくれます。

CSSのhoverをスマホにも対応することができるontouchstartは「指先が触れた際に発生する」イベントです。ontouchstartでCSSのhoverをスマホに対応した動作は、タップして他の要素をタップするまでデザインが反映され続けるという動作をします。

iPhoneにはなりますがontouchstartでhoverをスマホに対応させてみたときの動きを動画にしました。

 

 

この後に紹介するjqueryでhoverをスマホに対応するやり方も動画と同じ動作になります。

 

Advertisement

 

jqueryでhoverをスマホに対応する

 

jqueryでhoverをスマホに対応する場合のやり方です。

 

<div class="mobile-hover">
    <ul>
        <li>hover-1</li>
        <li>hover-2</li>
        <li>hover-3</li>
    </ul>
</div>

 

HTMLは前述のontouchstartでCSSのhoverをスマホに対応するやり方に使用したdivで囲んだulと3つのli要素を使用します。li要素のontouchstartは削除しておきます。

まずはindex.jsのようなファイル名でファイルを作成して、作成したindex.jsファイルに次のjqueryコードを記述します。

 

$('.mobile-hover')
    .bind('touchstart', function(){
        $(this).addClass('hover');
    }).bind('touchend', function(){
        $(this).removeClass('hover');
});

 

jqueryコードを記述したindex.jsファイルはhoverをスマホに対応するHTMLファイルのheadにscriptタグsrc属性でパスを繋ぎ読み込みます。

 

Advertisement

 

index.jsファイルに記述したjqueryのコードでは.mobile-hoverというクラスを対象にしているので、HTMLファイル内の.mobile-hoverクラスを付与した要素がjqueryでhoverをスマホに対応することができます。

 

スマホのhoverを解除するやり方に悩む

 

CSSのhoverをスマホにも対応させるのは簡単ですが、スマホの場合は、ホバーの動作がPC画面のときのようにマウスポインターが要素から離れたときにホバーが解除されることなく、他のhover要素をタップしないと解除されません。

そのためページ内の何かしらの要素がホバー状態のデザインのままになっていることになるので、スマホのhoverを解除するやり方に悩みながら色々と試してみるものの、うまく動作せず。

せめて簡単にスマホのhoverを解除するやり方をと思い、私なりに考えたのはbodyにontouchstartを記述することでタッチ範囲を広げるやり方です。

 

<body ontouchstart="">
    <!--いろんなコンテンツが入っている-->
</body>

 

やり方はontouchstart=””をbody開始タグに属性として記述するだけで済みます。

 

 

スマホでウェブページのコンテンツを見るときは基本的にタッチスクロールの操作で読み進めていくことになるのでbody要素をタッチスクロールしたときにスマホのhoverが解除されます。

CSSカテゴリの最新記事