奈良県のシステム開発/Web制作会社

2018/06/05

hoverを要素全体に効かせる方法

前橋 穂乃加前橋 穂乃加

今回は、DIV要素全体をリンクにする方法のご紹介をしたいと思います。
スマートフォンが普及してきた今、リンクする部分が少ないと、ユーザーのストレスになり、せっかくホームページを作成しても、離脱率が高くなり閲覧が下がってしまいます。

今回は、div要素全体にhoverを効かせるパターンを紹介したいと思います。

1.テキストリンクのみの場合

HTML

CSS

デモ

ポイントは、.sample1にdisplay: block;を設定して、
width,paddingで大きさを調節してあげることです。

次のBLOGでは、文字+画像の場合にリンクを要素全体に広げる方法を紹介したいと思います。
ありがとうございました!

つなぐる株式会社へお問い合わせをする