Ändern der Hintergrundfarbe des tr-Elements bei Mouseover

Möchte ich meine Zeilen der Tabelle markiert mit der Maus über, aber ich habe noch einen Weg finden, es zu tun, nicht mit Javascript. Ist dies nicht möglich in CSS?

Habe ich versucht, dieses:

tr:hover {
    background: #000;
}

Aber das funktioniert nicht. Mit td:hover funktioniert, aber ich möchte den hintergrund ändern, die Farbe der ganzen Zeile in der Tabelle.

Ist es eine Reine CSS/HTML Weg, es zu tun, oder bin ich zu haben, zu greifen, um Javascript?

InformationsquelleAutor der Frage Josh | 2011-03-30

  1. 83

    <tr>s selbst sind sehr schwer zu erreichen mit CSS versuchen tr:hover td {background:#000}

    InformationsquelleAutor der Antwort Wesley Murch

  2. 20

    Könnten Sie versuchen:

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

tr:hover td {
    background-color: transparent; /* or #000 */
}

    JS Fiddle demo.

    InformationsquelleAutor der Antwort David Thomas

  3. 7

    Dies funktionieren wird:

    tr:hover {
    background: #000 !important;
}

    Wenn Sie möchten, gelten nur für die bg-Farbe auf TD dann:

    tr:hover td {
    background: #c7d4dd !important;
}

    Wird es auch überschreiben Sie die Farbe und wenden Sie diese mit Nachdruck.

    InformationsquelleAutor der Antwort nirav dhanorkar

  4. 6

    Ich hatte das gleiche problem:

    tr:hover { background: #000 !important; }

    allone hat nicht funktioniert, aber das hinzufügen

    tr:hover td { background: transparent; }

    zur nächsten Zeile von mein css hat den job für mich!!
    Mein problem war, dass einige der TDs hatte bereits eine background-color zugewiesen und ich wusste nicht, dass ich eingestellt habe, um TRANSPARENT zu machen, die tr:hover arbeiten.

    Tatsächlich, ich habe es mit einem Klassennamen:

    .trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }

    Dank für diese Antworten, Sie machte meinen Tag!! 🙂

    InformationsquelleAutor der Antwort belushi

  5. 3
    tr:hover td.someclass {
   background: #EDB01C;
   color:#FFF;
}

    nur someclass Zelle markieren

    InformationsquelleAutor der Antwort KristKing

  6. 2
    tr:hover td {background-color:#000;}

    InformationsquelleAutor der Antwort MikeM

  7. 2

    Können Sie geben dem tr eine id und es tun.

    tr#element{
    background-color: green;
    cursor: pointer;
    height: 30px;

}

tr#element:hover{
    background-color: blue;
    cursor: pointer;

}

<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>

    InformationsquelleAutor der Antwort pixelJockey

  8. 0

    einfach . Fügen Sie einfach !wichtig ist am Ende der css-Zeile :

    tr:hover {    background: #000 !important; }

    InformationsquelleAutor der Antwort Amir

Schreibe einen Kommentar