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

2018/06/22

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

前橋 穂乃加前橋 穂乃加

こんにちら!つなぐる株式会社の前橋です。
今回は、前回のブログの続き、DIV要素全体をリンクにする方法のご紹介をしたいと思います。
以前は、テキストのみのボタンの作成をご紹介しましたが、今回は、画像+文字にリンクを効かせる紹介をしたいと思います。

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

2.テキスト+画像や文字リンクの場合

HTML

CSS

デモ

ポイントは、タグで全体を囲ってあげた後、前回紹介したときと同様に
display: iniline-block;をかけて、width,paddingで大きさを調整してあげることです。

マスターするとデザインの幅も広がるので、是非使ってみて下さい。

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