So erstellen Sie eine ganze div anklickbar mit CSS

Question

Manchmal möchten Sie eine vollständige div (oder ein anderes Element) in eine anklickbare Verknüpfung. Hier ist ein Beispiel.

Hier ist ein Cross-Browser, wie es mit reinem CSS zu tun:

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 */ 
} 

Zunächst geben die enthält div Position. Auf diese Weise wird, wenn wir "position: absolute;" auf den Link anwenden (siehe nächsten Absatz), er sich relativ zum umgebenden div positionieren.

Als nächstes, stellen Sie den Link absolut positioniert und die volle Größe und Tiefe der enthaltenen div. Der Z-Index des Links stellt sicher, dass er über allem anderen im div steht. Egal wo du klickst, du klickst auf den Link.

IE, natürlich, hat Macken. In diesem Fall benötigt der IE eine Hintergrundfarbe, damit ein Link klickbar ist, also geben wir ihm eine Hintergrundfarbe (weiß), setzen die Deckkraft auf 0 und geben dann eine IE-only-Opazität von 1% unter Verwendung der proprietären Filtereigenschaft von IE .

Schließlich, setzen Sie, was Sie wollen, in die div. Wenn Sie den Inhalt mit dem Z-Index überlagern, stellen Sie sicher, dass Sie keinem Element einen höheren Z-Index als den Link geben.

Answer 1

Sie können ein div in einen Link einfügen und es ist HTML5 gültig.

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