【CSS】DIV要素全体にリンクを効かせる方法

DIV要素全体にリンクを効かせたい!!

これには主に以下2つのパターンがあると思いますので、今回はこの2つの方法を紹介していきます。
  1. DIV要素内がリンクタグのみ
  2. DIV要素内にテキストや画像などリンクタグ以外の要素も存在する場合

1・DIV要素内がリンクタグのみ

これは簡単です。

a要素をwidthでリンクの横幅を広げ、displayでブロック要素にするだけです。

HTML
<div class="sam13"><a href="">テスト</a></div>
CSS
.sam13 a { display:block;
width: 100%; /* 横幅 */
background-color:#B2DBBF;
border:2px solid #00171F;
padding:10px; /* a要素内の余白 */
}

 /* 以下マウスを載せたときのスタイル */
.sam13 a:hover { background-color: #247BA0;
 color:#222222; }
こうなります

・横幅50%

2・DIV要素内にテキストや画像などリンクタグ以外の要素も存在する場合



HTML
<div class="sam22"><a href="">テストリンク</a><br />テストテキスト<br />テストテキスト</div>
CSS

.sam22{
color:#222;
position: relative;
width:100%;
padding:5px;
}
.sam22 a{
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
border:2px solid #00171F;
}

 /* 以下マウスを載せたときのスタイル */
.sam22 a:hover{
 color: #222;
 text-decoration: none;
opacity: 0.25;  /* 要素を透明にするタグ */
   background-color: #E6EBE0;}

こうなります
テストリンク
テストテキスト
テストテキスト

Related Posts

Previous
Next Post »