Kann ich „col', „colgroup' und CSS „:hover' verwenden, um mehr als nur eine einzelne Tabellenzelle hervorzuheben?

Können col, colgroups und die CSS-Pseudoklasse „hover“ für mehr als nur eine einzelne Zelle verwendet werden?

Zum Hervorheben von Tabellenzeilen und Spalten beim Bewegen der Maus können CSS-Pseudoklassen wie „:hover“ verwendet werden. Was aber, wenn Sie nicht nur eine einzelne Zelle, sondern eine ganze Zeile oder Spalte einschließlich der Überschriften hervorheben möchten?

Eine reine CSS-Lösung kann dies mithilfe der Pseudoelemente ::before und ::after erreichen. Diese Elemente fügen Inhalte vor bzw. nach dem ausgewählten Element hinzu. So geht's:

1. Hervorhebungselemente erstellen:

   • Fügen Sie ::before für die Zeilenhervorhebung und ::after für die Spaltenhervorhebung nach dem hinzu relevante Elemente (z. B. tr, td, th).
   • Verwenden Sie die absolute Positionierung, damit sich diese Elemente überall erstrecken können.
   • Positionieren Sie sie außerhalb der Elementgrenzen mit negativen Werten für links/oben (: :before) oder links/unten (::after).
   • Stellen Sie eine größere Breite/Höhe ein, um die gesamte Zeile/Spalte abzudecken.

2. Hervorhebungsüberlauf ausblenden:

   • Verhindern Sie, dass die Hervorhebungselemente die Tabelle überlaufen, indem Sie „Überlauf: ausgeblendet“ auf der Tabelle festlegen.
   • Dies hält den Tabellenbereich sauber und stellt gleichzeitig die Hervorhebung sicher geht über einzelne Zellen hinaus.

3. Zeilen-/Spaltenselektoren hinzufügen:

   • Um nur die aktuelle Zeile oder Spalte hervorzuheben, Verwenden Sie die Elemente ::before und ::after für :hover th (Kopfzeilen) und :hover .row / .col (klassenbasierte Selektoren für Zeilen/Spalten).

Der folgende CSS-Code implementiert diese Prinzipien:

table { overflow: hidden; }
td, th, .row, .col { cursor: pointer; padding: 10px; position: relative; }
td:hover::before, .row:hover::before { background-color: #FFA; content: '<pre class="brush:php;toolbar:false"><table>
  <tr>
    <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
  </tr>
  <tr class="row">
    <th class="row">160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
  </tr>
  <tr class="row">
    <th class="row">165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
  </tr>
</table>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #FFA; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

Der HTML-Code bleibt weitgehend unverändert, enthält jedoch Klassennamen für Zeilen und Spalten:

Diese Lösung funktioniert in modernen Browsern und erweitert Der Hover-Hervorhebungseffekt wirkt elegant auf ganze Zeilen und Spalten.

Das obige ist der detaillierte Inhalt vonKann ich „col', „colgroup' und CSS „:hover' verwenden, um mehr als nur eine einzelne Tabellenzelle hervorzuheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!