| Autor |
Nachricht |
chris89r
Threadersteller
Dabei seit: 02.03.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 02.03.2011 04:00
Titel [CSS] !important wirkt nicht bei :hover |
  |
|
Hallo zusammen,
ich versuche durch hover einen Abschnitt mitsamt Unterelementen zu verändern, komme aber nicht weiter. Ein einfaches Beispiel:
Ich habe normalen schwarzen Text und dahinter (als verschachteltes span-Element) roten Text:
| Code: | <span>
Normaler Text
<span class="rot">Roter Text</span>
</span>
|
Per CSS soll nun durch :hover alles blau werden:
| Code: | .rot { color:red; }
span:hover { color:blue !important; }
|
Mit der Maus auf dem roten Text zeigt sich der gewünschte Effekt, so weit so gut.
Aber wenn man nur auf den schwarzen Text zeigt, wird auch nur dieser blau, der rote Text bleibt rot, obwohl er doch ebenfalls vom hover betroffen sein sollte (sowohl FF als auch IE).
Kann mir jemand den Grund für dieses seltsame Verhalten erklären und gibt es dafür eine Lösung?
Danke im Voraus für die Hilfe.
Zuletzt bearbeitet von chris89r am Mi 02.03.2011 04:02, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Mi 02.03.2011 09:29
Titel Re: [CSS] !important wirkt nicht bei :hover |
|
|
| chris89r hat geschrieben: | | der rote Text bleibt rot, obwohl er doch ebenfalls vom hover betroffen sein sollte |
Nein, denn er wird nicht gehovert, sondern nur sein Elternelement. Und da er seine eigene Farbe hat, wird die Farbänderung seines gehoverten Elternelementes auch nicht vererbt.
Abhilfe:
| Code: | span:hover,
span:hover span { ... } |
oder
| Code: | span:hover,
span:hover * { ... } |
oder
| Code: | span:hover,
span:hover .rot { ... } |
(letzteres erspart auch !important.)
|
|
| |
|
|
|
Anzeige
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 02.03.2011 09:37
Titel
|
|
|
Noch besser gleich den Selektor und kein Element ansprechen:
| Code: |
.rot:hover .rot{
color: blue;
}
|
!important ist hier vollkommen unnötig.
|
|
| |
 |
|
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 02.03.2011 09:43
Titel
|
|
|
| Smooth-Graphics hat geschrieben: |
| Code: |
.rot:hover .rot{
color: blue;
}
|
|
Du meinst so oder? 
| Code: |
span:hover .rot{
color: blue;
}
|
|
|
| |
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 02.03.2011 09:45
Titel
|
|
|
Ach gnarl. Er möchte ja ein Span-hover und ein anderes span ändern. Sorry. Dann heikos letzte Lösung.
Zuletzt bearbeitet von Smooth-Graphics am Mi 02.03.2011 09:46, insgesamt 1-mal bearbeitet
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 02.03.2011 09:49
Titel
|
|
|
Mit .rot:hover .rot wird natürlich gar nix passieren  (denn nur das Kind hat die Klasse .rot.)
Aber natürlich ist !important hier unnötig - es hätte nur einen Sinn, wenn das Ganze z.B. in ein CMS wandert, so dass der CSS-Autor nicht mehr vorhersehen kann, in welchen Zusammenhängen die betreffende Regel später wirken soll, er aber sicherstellen muss, dass sie dennoch unter allen Umständen angewandt wird.
Zuletzt bearbeitet von heiko_rs am Mi 02.03.2011 09:52, insgesamt 2-mal bearbeitet
|
|
| |
|
|
chris89r
Threadersteller
Dabei seit: 02.03.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 02.03.2011 23:39
Titel Re: [CSS] !important wirkt nicht bei :hover |
|
|
Super, danke für die schnellen Rückmeldungen.
| heiko_rs hat geschrieben: | Nein, denn er wird nicht gehovert, sondern nur sein Elternelement. Und da er seine eigene Farbe hat, wird die Farbänderung seines gehoverten Elternelementes auch nicht vererbt.
|
Deswegen hatte ich ja auch das !important drin, da ich dachte, es würde für die betreffende Eigenschaft die Werte der Unterelemente überschreiben (womit mir dann jetzt trotz diverser Lektüre der Sinn von important recht schleierhaft ist, ohne das hover entspricht es ja meinen Vorstellungen und färbt alles blau).
Die letzten beiden Abhilfen von heiko funktionieren aber, vielen Dank.
Zuletzt bearbeitet von chris89r am Mi 02.03.2011 23:42, insgesamt 1-mal bearbeitet
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 03.03.2011 01:11
Titel Re: [CSS] !important wirkt nicht bei :hover |
|
|
| chris89r hat geschrieben: | | Deswegen hatte ich ja auch das !important drin, da ich dachte, es würde für die betreffende Eigenschaft die Werte der Unterelemente überschreiben |
Bei direkter Anwendung auf ein Element ja, bei Vererbung durch einen Vorfahren nein.
| chris89r hat geschrieben: | | womit mir dann jetzt trotz diverser Lektüre der Sinn von important recht schleierhaft ist |
Es ist wirklich nahezu ausschließlich für ein CMS relevant, denn eine !important-Deklaration wird immer angewandt, egal wie hoch die Selektoren-Spezifität anderer Regeln ist, die evtl. ebenfalls auf das betreffende Element wirken. Und da es in einem CMS manchmal etwas drunter & drüber geht, kann man !important einsetzen, um sicherzustellen, dass die betreffende Deklaration unter allen Umständen angewandt wird.
Und außerdem lassen sich inline-Styles (leider ebenfalls CMS-typisch) ausschließlich per !important überschreiben.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
hover-Button/hover-Bild wird darunter eingefügt
Css important im IE6 - wie ersetzen?
media queries versteht nur !important;
Inverser Text wirkt zugelaufen bei GoLive
CSS a:hover IE 5.01
:hover und ie6
|
|
Willkommen auf dem Portal für Mediengestalter
