CSS-Mouseover-Highlight mit Tabellenzeilenbereich

Question

Ich habe eine einfache HTML-Tabelle mit PHP aus einer Datenbank generiert, in der in einigen Fällen eine Zelle mehr als eine Zeile umfasst. Als einfaches Beispiel:

<table>
  <tr class ="highlightRow">
    <td>Cell 1</td>
    <td rowspan="2">Cell over more rows</td>
  </tr>
  <tr class ="highlightRow">
    <td>Cell 2</td>
  </tr>
</table>

Ich hebe die Zeile, über der sich die Maus befindet, mit einer einfachen CSS-Regel hervor:

.highlightRow {
    background-color:       #FFF;
}
.highlightRow:hover {
    background-color:       #EEE;
}

Ich kann keine Lösung finden (das ist nur CSS), um "Zelle über mehr Zeilen" hervorzuheben, wenn die Maus über "Zelle 2" bewegt wird.

html css html-table

1

Ardor 23 Dez. 2015 im 12:21

Answer 1

Ich hatte die gleichen Probleme in meinen Projekten. Wir können es nicht tun. Aus diesem Grund haben die meisten Entwickler jquery DOM-Durchquerungsmethoden (parent (), child (), sibling (), next (), prev (), After () empfohlen. ,usw..,)

Referenz: Gibt es einen übergeordneten CSS-Selektor?

Fazit: In CSS gibt es keine Option zum Auswählen des übergeordneten Elements. Wir können dies mit Hilfe von Javascript tun.

** wir lieben das Codieren .. *

0

Community 23 Mai 2017 im 11:48

Answer 2

Ich weiß nicht, ob dies Ihren Bedarf befriedigt, aber schauen Sie sich meine Lösung an

.highlightRow {
    background-color:       #FFF;
}

.highlightRow:hover{
    background-color:       #EEE;
}


table:hover .include{
    background-color:       #EEE;
}

<table>
  <tr class ="highlightRow">
    <td>Cell 1</td>
    <td rowspan="2" class="include">Cell over more rows</td>
  </tr>
  <tr class ="highlightRow">
    <td>Cell 2</td>
  </tr>
</table>

Der Trick besteht darin, die Zelle .include jedes Mal hervorzuheben, wenn die Tabelle bewegt wurde, und eine Regel hinzuzufügen, um die tr jedes Mal hervorzuheben, wenn sie bewegt wird.

0

StaleMartyr 23 Dez. 2015 im 10:18

CSS-Mouseover-Highlight mit Tabellenzeilenbereich

2 Antworten

Verwandte Fragen

Neue Fragen

html