00 Stimmen

CSS: Hover Effekt nur bei gefüllten Tabellenzellen

Frage von Gast | 28.09.2016 um 22:41

Bei einer Tabelle sind die Zellen mit und ohne Inhalt. Nun möchte ich einen hover- Effekt umsetzen, der aber nur wirksam wird, wenn in einem <td> Element Inhalte vorhanden sind:

######## CSS ########

td:hover {
   background-color: red;
}

####### HML#########

<td>
   <p>Ich bin Inhalt</p>
</td>
<td>
   <input type="text" value="Ich bin auch Inhalt" name="test" />
</td>
<td>
   //hier also KEIN hover Effekt
</td>

In diesem Beispiel soll der Hover-Effekt nur in der ersten und der zweiten Zelle aktiv sein. Die dritte Zelle soll keinen Hover-Effekt haben und sich entsprechend nicht verfärben, wenn man mit der Maus darüber geht.

Vielen Dank für eure Hinweise.

AntwortenPositivNegativ
2Beste Antwort2 Stimmen

Du könntest eventuell mit dem CSS-Selektor :empty arbeiten. Dieser Selektor wählt alle leeren Elemente aus und wenn du ihn mit :not kombinierst, bekommst du alle nicht-leeren Elemente - also Elemente mit Inhalt.

In deinem Fall also:

td:not(:empty):hover {
  background-color: red;
}

Das sollte alle nicht leeren Tabellenzellen auswählen.
28.09.2016 um 23:26

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

CSS-Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.