- Learn
- Guida CSS Tecniche essenziali
- Evidenziare la riga di una tabella al passaggio del mouse
Evidenziare la riga di una tabella al passaggio del mouse
Una funzionalità molto utile per migliorare l’usabilità di una tabella consiste nell’evidenziare una tabella al passaggio del mouse. Con il termine ‘evidenziare’ si intende in questa sede il modificare lo stile in maniera da rendere distinguibile la riga corrente dal resto degli elementi contenuti nella tabella.
Il più delle volte si evidenzia la riga modificando il colore dello sfondo, ma qualsiasi altra operazione può essere compiuta nella stessa maniera (cambiare la dimensione e/o il colore del testo, modificare il bordo, etc.)
I moderni browser supportano l’effetto hover anche sull’elemento tr
, quindi è quello su cui andremo ora ad agire con il seguente codice:
tr {
background-color: #efefef;
}
tr:hover {
background-color: #dedede;
}
Possiamo vedere nel seguente esempio che passando il mouse su ognuna delle righe di una tabella essa verrà evidenziata con un background leggermente più scuro. La soluzione è compatibile con tutti i browser eccetto Internet Explorer 6.
Per rendere compatibile il lavoro anche per IE6 utilizzeremo una soluzione Javascript. Per comodità faremo uso di jQuery ma anche una soluzione con Javascript puro non presenta problemi di compatibilità.
Per prima cosa utilizziamo i commenti condizionali e includiamo la libreria nella pagina:
<!--[if lte IE 6]> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> //codice Javascript </script> <![endif]-->
Una volta inclusa la libreria nella pagina inseriamo il seguente codice:
$(function(){
$('tr').hover(function(){
$(this).css('background','#dedede');
}, function(){
$(this).css('background','#efefef');
});
});
A questo punto l’esempio è compatibile anche con i vecchi browser di casa Microsoft. L’esempio compatibile con IE6 è visualizzabile nella seconda demo.
Se vuoi aggiornamenti su Evidenziare la riga di una tabella al passaggio del mouse inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Continuous Integration and Deployment Best Practices on AWS
Lavorando con un’infrastruttura 100% API-driven è possibile sviluppare ed eseguire applicazioni con velocità e flessibilità come mai prima d’ora. Vi […]