モバイルデバイスでタップした時に擬似的に発生する :hover ステートを CSS 上で効かなくする

2522 ワード
CSS HTML MediaQueries HTML テキストリンク

レスポンシブな HTML + CSS を書いている時、デスクトップでだけマウスカーソルのホバー時にツールチップを出したいとかあると思うんです。

こんな感じで。

<a class="link">ちょっと見て！<span class="tooltip">やっぱ見ちゃダメ</span></a>

.tooltip {
    display: none;
}
.link:hover .tooltip {
    display: block;
    /* 位置合わせする */
}

で、モバイルデバイスには :hover ステートが無いのでツールチップは表示されません。…と思うじゃないですか。ところが、モバイルデバイスには :hover ステートは無いものの、タップ時に擬似的に :hover が発生して、他の場所をタップするまで発生したままになるんですね。なので、このままだとタップした時にツールチップが表示されそのままになっちゃうんです。ちょっと嫌ですね。

これ、簡単に抑制できます。

.tooltip {
    display: none;
}
@media (hover: hover) {
    .link:hover .tooltip {
        display: block;
        /* 位置合わせする */
    }
}

メディアクエリの hover 特性を使って、実際に :hover ステートをサポートするデバイスでのみ CSS が有効なようにすればいいんですね。

分かってしまえば簡単な話なんですが、すぐに忘れそうなので自分用の備忘録に残しておきます。