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.
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
Hintergrund einer Website verdunkeln (Gray Out Effekt)
Tutorial | 0 Kommentare
Mouseover Buttons mit CSS ohne Nachladen
Tutorial | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
CSS: :hover für :before und :after
Frage | 3 Antworten
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
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.
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:
Das sollte alle nicht leeren Tabellenzellen auswählen.
28.09.2016 um 23:26