レスポンシブな 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 が有効なようにすればいいんですね。
分かってしまえば簡単な話なんですが、すぐに忘れそうなので自分用の備忘録に残しておきます。
