【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