Quesito di oggi: come è possibile implementare uno stile a:hover inline? In realtà non esiste nessun supporto per utilizzare una pseudoclasse tramite i fogli di stile in linea. E anche se esistesse sarebbe una pratica non proprio corretta poichè dovremmo utilizzare il nostro foglio di stile CSS esterno per implementarla. E allora vi chiederete perchè arrovellarsi così tanto se alla fine la prassi è quella di non utilizzare uno stile inline con una pseudoclasse che tra l’altro non è neanche supportata.
La risposta è semplice … quando si presenta un nuovo progetto le variabili in gioco sono potenzialmente infinite e guarda caso mi è proprio capitato di lavorare su un progetto che richiedeva questo tipo di funzionalità, ovvero l’utilizzo di una pseudoclasse a:hover inline. Vi spiego subito il perchè … il progetto in questione tratta articoli di una rivista ordinati tramite una scaletta generata dinamicamente. Questa scaletta viene visualizzata nella colonna destra accanto all’articolo ed essendo generata in PHP riporta l’ordine di visualizzazione in base alla scaletta della rivista degli articoli. Ogni pulsante della scaletta ha un colore diverso che viene ricavato in base alla categoria di appartenenza dell’articolo, il tutto dinamicamente. Per riuscire ad implementare questa funzionalità sono ricorso a Javascript onmouseover e onmouseout. Di seguito vi mostro il codice utilizzato.
1 |
<a href="index.html" onmouseover="this.style.background="red"" onmouseout="this.style.background="green"">Click</a> |
1 2 3 4 5 |
$(document).ready(function() { $('a').hover(function(){ $(this).css({background-color: 'green'}); }); }); |