Perché il passaggio del mouse CSS non funziona sulle righe della tabella quando le celle all'interno delle righe hanno nomi di classe?

Sono bloccato con questo problema quindi qualsiasi aiuto sarebbe apprezzato. Ho una tabella con più righe. Ogni cella all'interno della riga appartiene a una determinata classe. Io uso questi nomi di classe per colorare le celle.Perché il passaggio del mouse CSS non funziona sulle righe della tabella quando le celle all'interno delle righe hanno nomi di classe?

Ecco un esempio di fila dal mio tavolo:

<tr> 
    <td class = "summarypage-odd-column">Theme</td> <td class = "summarypage-odd-column">Q2 2009</td> <td class = "summarypage-odd-column">Q1 2009</td> 
    <td class = "summarypage-even-column">Theme</td> <td class = "summarypage-even-column">Q2 2009</td> <td class = "summarypage-even-column">Q1 2009</td> 
    <td class = "summarypage-odd-column">Business Area</td> <td class = "summarypage-odd-column">Q1 2009</td> <td class = "summarypage-odd-column">Q1 2008</td> 
</tr>

Vorrei evidenziare ogni riga quando l'utente sposta il puntatore del mouse su qualsiasi cella nella stessa riga. Quindi ho usato il seguente codice CSS per raggiungere questo obiettivo.

tr:hover { 
    background-color: #FFFAF0; color: #000; 
}

purtroppo sembra perché ogni cella di dati tabella ha un nome di classe, l'hover non funziona. Ma se rimuovo i nomi delle classi dalle celle di dati, funziona il passaggio del mouse.

La mia domanda è c'è un modo per far funzionare la cosa di hover per la riga della tabella, pur avendo ancora i nomi di classe per le celle di dati della tabella all'interno della riga.

fonte

2010-02-12 Vicer

why wiki della comunità ?? –

Prova questo:

tr:hover td { 
    background-color: #FFFAF0; color: #000; 
}

collocare questo dopo le dichiarazioni esistenti td stile di essere al sicuro

fonte

2010-02-12 00:48:08

compagno, l'hai completamente inchiodato! Grazie. quando l'ho guardato per la prima volta ho pensato che la tua soluzione avrebbe applicato la schiena. colora solo la cella di dati puntata dal puntatore del mouse e non l'intera riga (che è ciò che volevo). Ma ovviamente non è così. C'erano alcune righe come l'intestazione che non volevo evidenziare, quindi ho definito un'altra classe sotto il codice ur e inserire: --- tr.summarypage-section-title: hover td { \t background-color: deepskyblue; colore: # 000; } --- – Vicer

@Nick Craver funziona, ma potresti spiegare perché tr: hover non funziona? – Bear

@Bear perché il codice html precedente deve essere nidificato nei tag

. Una volta annidati in tag di tabella, il CSS per tr: hover funziona almeno su Chrome e FF con l'attributo di classe definito. – DataHerder

This does not happen for me. Assicurarsi che si sta solo aggiungere/rimuovere i nomi di classe durante il controllo se hanno un impatto, e assicurarsi che i td s non hanno un proprio sfondo coprire quella del tr.

fonte

2010-02-12 00:45:38 Matchu

hi Matchu, hai dato i nomi delle classi delle celle ma non hai usato quei nomi per formattare le celle. prova ad aggiungere le seguenti due linee alla sezione "stile" e guarda cosa succede. - td.one {colore dello sfondo: rosso} td.due {background-color: blue} - Questo è il problema con cui mi trovo. – Vicer

Esatto. I tag 'td' sono in cima, quindi il loro colore di sfondo ha la precedenza. Che ne dici di avere 'tr: hover td' come stile? – Matchu

Probabilmente è necessario utilizzare l'importante designatore per assicurarsi che il vostro stile hover sostituisce l'int sfondo definito! la classe:

tr:hover { 
    background-color: #FFFFAF0 !important; 
    color: #000 !important; 
}

è interessante notare che questo non funzionerà per IE6 perché quel browser si applica solo passaggio del mouse a un tag.

fonte

2010-02-12 00:49:59

Le istruzioni CSS all'interno del nome classe hanno la precedenza sulle istruzioni <tr>.

Per risolvere il problema, utilizzare td.summarypage-odd-column: hover, td.summarypage-even-column: passa il mouse all'interno del CSS.

Nota: se si utilizza IE6, il comando hover funziona solo sui collegamenti, ovvero a: hover.

fonte

2010-02-12 03:43:47 Sarhanis

grazie ma 'td.summarypage-odd-column: hover' evidenzia solo ogni cella di dati dsnt? Voglio che l'intera riga sia evidenziata. La risposta di Nick 'tr: hover td' è la strada da percorrere. ma se vuoi trattare un insieme di celle all'interno della riga in modo diverso puoi usare smthin simile a quello che suggerisci. Ad esempio, per non evidenziare le celle vuote: -> tr: passa sopra td.empty-cells {... table bk color qui ...} <- farà. – Vicer

Penso che il colore di sfondo td sovrascriva il colore di sfondo tr. La soluzione fornita da @Nick Craver è quella giusta.
È necessario modificare le celle sfondo-colore non la riga sfondo-colore.

tr:hover td { 
    ... 
}

fonte

2014-02-09 11:27:34

mai mettere spazio tra

tr:hover(space)td

stavo dando spazio quindi che stava lavorando per me.

fonte

2014-02-17 22:10:08

Si prega di migliorare la risposta. –

Problemi correlati