div 全体 (または他の要素) をクリック可能なリンクにしたい場合があります。これが例です。
純粋な CSS を使用してクロスブラウザーで行う方法を次に示します。
HTML:
<div class="clickable">
<a href="URL_OF_LINK_TARGET"> </a>
Rest of div content goes here
</div>
CSS:
div.clickable { /* Containing div must have a position value */
position:relative;
}
div.clickable a {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
まず、含まれる div 位置を指定します。そのように、「position:absolute;」を適用すると、リンク (次の段落を参照) に対して、含まれている div に対して相対的に配置されます。
次に、リンクを絶対配置し、含まれる div のフル サイズと深さを作成します。リンクの z-index は、それが div 内の他のすべてのものの上にあることを確認するため、どこをクリックしてもリンクをクリックしていることになります。
IE には、当然のことながら癖があります。この場合、IE はそのようなリンクをクリック可能にするために背景色を必要とするため、背景色 (白) を指定し、不透明度を 0 に設定してから、IE 独自のフィルター プロパティを使用して IE のみの不透明度を 1% に設定します。 .
最後に、必要なコンテンツを div に配置します。z-index を使用してコンテンツを階層化する場合は、リンクよりも高い z-index を要素に与えないようにしてください。