Link su un elemento blocco

27 giugno 2011

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.

Tutte le lezioni

1 ... 46 47 48 49

Se vuoi aggiornamenti su Link su un elemento blocco inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Link su un elemento blocco

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing