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

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

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

Web Tips はてなブログ

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

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

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

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