web-dev-qa-db-ja.com

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

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を要素に与えないように注意してください。

csshtmlclickable
6
Emil Morris

リンクでdivをラップすることができ、それは有効なHTML5です。

<a href="#">
      <div></div>
</a>
27
Michael Terry