CSS全体でdivをクリック可能にする方法

Question

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インデックスは、div内の他のすべての項目の上にあることを確認します。したがって、クリックした場所に関係なく、リンクをクリックしています。

IEは当然のことながら、癖があります。この場合、IEはそのようなリンクをクリック可能にするためにバックグラウンドカラーを必要とするため、背景色（白）を与え、不透明度を0に設定し、IEの独自のフィルタプロパティを使用してIEのみの不透明度を1％ 。

最後に、必要なコンテンツをdivに入れてください。 z-indexを使用してコンテンツをレイヤー化する場合は、リンクよりも上位のz-indexを指定しないようにしてください。

Answer 1

リンク内にdivをラップすることができます。有効なHTML5です。

<a href="#"> 
     <div></div> 
</a>