読者です 読者をやめる 読者になる 読者になる

ホバーエフェクト :hover をスマホでどう実現するか?

ホバーエフェクトでググれば、かっこいいアニメーションのものがたくさんヒットします。

ただ、スマホなどタッチデバイスの場合、a 要素にエフェクトをつけても、エフェクトが始まる前にリンク先に飛んでしまいます。他の要素にエフェクトを付けて、そのエフェクトでリンクボタンを表示するなどの方法、たとえば、「そんなにも褒めないよ。映画評」のような方法もありますが、ブロック全体にリンクを貼って同じことは出来ないかと、こんな方法を考えてみました。

エフェクトが完了するまで透明のブロックでリンクを覆っておく方法です。当サイトのトップで利用している方法です。

分かりやすくするために、覆うブロックに赤色をつけています。