[Risolto] tr:hover?

lelebart

[Risolto] tr:hover?

salve a tutti, domanda very n00b :
io vorrei che un'intera riga di una tabella si "evidenziasse", ovvero assumesse un aspetto differente, al passaggio del mouse su una qualsiasi cella della suddetta riga.
per ora ho trovato possibile gestire ciò solo tramite javascript: www.webmasterpoint.org/webdesign/css/14.asp tralasciando la differenziazione tra righe pari e dispari (gestita via php nel mio caso), il metodo adottato è quello del onmouseover/onmouseout:

[...]
tr.classe_di_partenza { background-color: #FCFCFC; }
tr.classe_hover { background-color: #CFCFCF; }
[...]
<tr class="classe_di_partenza" onmouseover="this.className='classe_hover';" onmouseout="this.className='classe_di_partenza';">
[...]
```io vorrei evitare questa soluzione, ovviando con qualcosa del tipo

[...]
tr.classe_di_partenza { background-color:; }
tr.classe_di_partenza:hover { background-color:; }
[...]
<tr class="classe_di_partenza">
[...]


ma non funziona, nemmeno indicando con !important i selettori

ho pensato fosse dipeso dal fatto che la differenziazione delle righe pari o dispari va a lavorare sulle classi delle celle annidiate, e non andando a considerare la classe della riga d'appartenenza..

spero di essere stato esplicativo.. qualche -saggio- consiglio? :vaiii:

karedas

Ciao lelebart

La proprietà "hover" dei css appartiene al tag adibito ai link ipertestuali dei contenuti e cioè ai nostri "a".
In secondo luogo solo firefox riconosce questa funzione come tale anche ad esempio sui **div **a differenza però di browser come ie 6.

Per far funzionare ciò che ti serve devi sfruttare javascript attraverso un metodo chiamato "onmouseover" che va utilizzato con una variabile la quale deve identificare un "percorso" nel nostro codice.

Esempio:


<script type="text/javascript">
<!-- 
window.onload=function{
if(document.getElementsByTagName && document.getElementById){
colorMyTd();
}
function colorMyTd(){
var oggetto= document.getElementsByTag('tr');
oggetto.onmouseover=function{
this.style.backgroundColor="#333333";
}
}
-->
</script>

```Adesso:
all'**window.onload** chiede al browser se javascript è attivato.
Se questo da risultato positivo richiama la funzione "**colorMyTd()**" che imposta per ogni td un background diverso quando il mouse passerà sopra di essi.

Un altro esempio di javascript potrebbe appunto , come da tuo esempio, quello di *affibiare una classe ad ogni td* ogni volta che il mouse si posa sopra di essi. Il css attraverso le proprietà opportune su tale classe farebbe in modo che il browser modifichi lo stile del tuo oggetto.


*Attento* non ho gli strumenti qui con me necessari e non so se lo script funzionerà a dovere . Non mi ricordo poi se va impostato un ciclo sull'evento "onmouseover" per ogni td presente.
In caso vediamo se spostare il thread nella sezione adatta.
--------------------------------------

Detto questo **è molto importante** che tu legga attentamente [le regole](http://www.giorgiotave.it/forum/presentati-al-forum-gt/) del nostro forum.
Non sono permesse un uso eccessivo di emoticons ne la presenza di link attivi.

Ciao :)

lelebart

grazie e scusa per i troppi smiley..
comunque sia, se l'unica soluzione è adottare javascript allora mi ingegnerò con jQuery! -e sarà il momento di spostare la discussione in una sezione più adatta-
granzie ancora!

claudioweb

Ciao
Con JQuery, dopo averlo mandato in esecuzione, puoi far tutto senza aggiungere alcun richiamo nell'XHTML.

$("tr.classe_di_partenza").hover(function(){
  $(this).addClass("tr.classe_hover");
},function(){
  $(this).removeClass("tr.classe_hover");
});
```Però potresti farlo anche senza javascript.
Dovresti fissare l'altezza e la larghezza del link pari pari uguale a quella della cella che lo contiene.
Così puoi sfruttare la variazione di stile del link per impostare uno sfondo.

:ciauz:

lelebart

grazie mille! infatti ero arrivato ad una soluzione simile

$(".tbl-border tr.tbl-r2").mouseover(function() {$(this).removeClass("tbl-r2").addClass("over");}).mouseout(function() {$(this).removeClass("over").addClass("tbl-r2");});
$(".tbl-border tr.tbl-r1").mouseover(function() {$(this).removeClass("tbl-r1").addClass("over");}).mouseout(function() {$(this).removeClass("over").addClass("tbl-r1");});
```il problema però rimaneva: il fatto è che anche le celle hanno una loro classe con un loro background, ed è lo stesso motivo per il quale il css del mio primo post non funzionava! "pulendo" (rimuovendo le classi dalle celle) il codice, funziona tutto correttamente (almeno su FF). così facendo ho perso di vista il fatto che la tabella -incriminata- fa parte di un cms (php-fusion appunto) e mi "sballavo" un poco la resa grafica. ho optato quindi per jquery, in particolare sfruttando il plugin "Table Hover" di Roman Weich, che fa proprio quello che volevo (e volendo qualcosa in più). i risultati li vedete sul mio sito (homepage e forum)
:gthi: