Come rendere un intero div cliccabile con i CSS

Question

A volte si desidera trasformare un intero div (o altro elemento) in un collegamento cliccabile. Ecco un esempio.

Ecco un modo cross-browser per farlo usando CSS puro:

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

In primo luogo, dare la posizione div contenitore. In questo modo, quando applichiamo "position: absolute;" al link (vedi il prossimo paragrafo) si posizionerà rispetto al div contenente.

Successivamente, posizionare il collegamento in posizione assoluta e le dimensioni e la profondità complete del div contenitore. Lo z-index del link fa sì che sia sopra ogni altra cosa nel div, quindi non importa dove clicchi, stai facendo clic sul link.

IE, naturalmente, ha qualche stranezza. In questo caso, IE richiede un colore di sfondo per tale link per essere cliccabile, quindi gli diamo un colore di sfondo (bianco), impostiamo l'opacità su 0, quindi diamo un'opacità solo IE dell'1% usando la proprietà proprietaria del filtro di IE .

Infine, inserisci il contenuto desiderato nel div. Se hai intenzione di sovrapporre il contenuto usando z-index, assicurati di non dare a nessun elemento uno z-index più alto del link.

Answer 1

È possibile racchiudere un div in un collegamento ed è HTML5 valido.

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