In specifiche situazioni si può avere la necessità (o il desiderio) di estendere il comportamento tipico dei link all'intero elemento blocco, per esempio un div, che li contiene.
Per chiarire meglio il concetto possiamo osservare subito l'esempio. Quello che desideriamo ottenere è che sia cliccabile per attivare il link non solo il testo, ma l'intero div che lo contiene; stessa cosa dicasi per il cambiamento del colore di sfondo sull'hover.
Il problema nasce dal fatto che di base l'elemento a con cui si definiscono i link è un elemento inline e non di tipo blocco.
Questo comportamento standard può però essere modificato con i CSS, usando la proprietà display. Passiamo dunque al codice.
Per la parte HTML abbiamo:
<div><a href="#" class="block">Lorem ipsum dolor sit amet.</a></div>Ovviamente, in situazioni reali, potremo avere al posto di un div un paragrafo, un titolo, etc.
Fondamentale invece assegnare una classe ai link per i quali si vuole ottenere l'effetto. Grazie alla classe, infatti, possiamo escludere tutti gli altri link, i quali seguiranno il comportamento standard.
E veniamo al CSS:
a.block { display:block;padding:5px; border:1px solid #666; text-decoration: none}
a.block:hover, a.block:focus, a.block:active { background-color:#99cc66; }La parte fondamentale riguarda l'assegnazione del valore block per la proprietà display. Per ottenere l'effetto è sufficiente. Tutto il resto è formattazione visuale che può essere personalizzata a nostro piacimento.
