Link di un'intera riga di tabella in grassetto e colorati al passaggio del mouse

[goalmanager]

Salve, ho un problema con i css che non riesco a risolvere,

Ho una tabella alla quale ho assegnato il seguente stile

table.righealterne   td { 
    background-color: #143154;
    font-size: 10px;
    text-align: center;   
    color: blue;
} tr.alterna td{
background-color: #163279;
}tr#righeeve:hover  { 
   color: red;
   font-weight: bold;    
}

Quest'ultima parte al fine di rendere l'intera riga evidenziata in rosso e in grassetto al passaggio del mouse (visto che il contenuto è data da link). Però riscontro un problema perchè in rosso mi si evidenzia solo il contenuto della cella sulla quale è puntato il mouse, mentre tutta la riga viene evidenziata in grassetto? Come mai?

Grazie per eventuali risposte... Buon sabato e buon week end...

[miki92]

Nel tuo codice hai fatto in modo che il testo diventi rosso non la riga. Cambia l'ultima parte con:

tr#righeeve:hover  { 
   background-color: red;
   font-weight: bold;    
}

[goalmanager]

Ciao Miki, si scusa perdonami, intendevo proprio dire che io vorrei che l'intero testo (della riga) mi diventasse rosso, e invece mi diventa rosso solo il testo di una cella (sulla quale arrivo col cursore) ma le celle a destra e a sinistra nonostante divengano in grassetto (anch'esse come il testo della cella sulla quale poggio il cursore) non diventano di colore rosso...Che stranezza....

Comunque mi hai dato una idea, ora provo subito questa soluzione alternativa (riga colorata anzichè tutto il testo della riga colorata e se è più gradevole la sposo ;-) )

[miki92]

Ah scusa ho capito io male allora. Comunque in caso di problemi puoi linkare la pagina in questione o postare tutto il codice.

[NLSweb]

con il CSS3 :nth-child() Selector si può direttamente puntare agli elementi dispari e pari ( che siano colonne o righe )

senza bisogno di assegnare delle classi dedicate...

esempio

<style>
table{
 font-family:Arial, sans-serif;
 font-size:200%;
}

/*righe pari */
tr:nth-child(even){
 background: #DDD;
}
/* righe dispari */
tr:nth-child(odd){
 background: #FFF;
}

/*colonne pari al passaggio del mouse*/
td:nth-child(even):hover{
 color: red;
}
/* colonne dispari al passaggio del mouse*/
td:nth-child(odd):hover{
 color: blue;
}
</style>

[goalmanager]

Allora io ho tra i css

table.righealterne   td { 
    background-color: #143154;
    font-size: 10px;
    text-align: center;
    
    color: blue;
} tr.alterna td{


background-color: #163279;
}tr#righeeve:hover  {
 
   color: red;
   font-weight: bold;
   
}

e la tabella

<table class="righealterne"><thead><tr><th></th><th></th></tr></thead><tbody>
<tr id='righeeve' ><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>

ovviamente l'ho semplificata perchè l'ho creata con php e è piena di dati (anche per mie incapacità di ottimizzare i codici...) :-)

[miki92]

Ah beh in questo caso basta che aggiungi "td" alla fine dell'ultima regola:

tr#righeeve:hover  td{

Quindi il nuovo CSS sarà:

table.righealterne   td { 
    background-color: #143154;
    font-size: 10px;
    text-align: center;
    
    color: blue;
} tr.alterna td{


background-color: #163279;
}tr#righeeve:hover  td{
 
   color: red;
   font-weight: bold;
   
}

[goalmanager]

Grazie mille Miki!!!