CSS Selektoren, Kombinatoren

[normdew]

Hallo zusammen,

ist es möglich bei folgender Struktur ...

<div>
    <div>
        <a href="">...<span>...</span></a>
    </div>
</div>
<div>                        
    <h1>...</h1>
    <p>...</p>
</div>

... vom a:hover Zustand ausgehend das außerhalb liegende h1-tag zu stylen?

... wenn ich also den Link mit der Mouse hover, dass sich dann auch der Zustand der Überschrift verändert.

Irgendwie so:
... aber wie genau?

a:hover ~ div h1 { ... }

Es handelt sich ja nicht um das nächst folgende Element und auch nicht um ein Kind-Element.

Ist verständlich was ich meine?

 

[Myhar]

AW: CSS Selektoren, Kombinatoren

Ja, es ist verständlich. Und nein, es ist nicht möglich.
Du kannst aber :hover auf jedes Element anwenden (außer, du musst IE6 unterstützen)
Du kannst zB:

div:hover a{ ... }
div:hover h1{---}

verwenden.
Wozu brauchst du eigentlich 2 divs um einen a-Tag?

 

[normdew]

AW: CSS Selektoren, Kombinatoren

Das mit den 2 Divs kannst du erstmal ruhig außer acht lassen, dass wirkt in der reduzierten Struktur die ich gepostet habe nicht sehr sinnig, macht aber sinn, da wo ich es eingesetzt habe.

Schade, dass sowas bei all den Kombinatoren die es jetzt spätestens mit CSS3 gibt, nicht geht!

 

[Myhar]

AW: CSS Selektoren, Kombinatoren

Solche Selektoren sind nicht wirklich notwendig. Solche Probleme sollten sich über eine sinnvollere Strukturierung des Markups lösen lassen.
Auch kannst du in HTML5 einen Link über divs/h1/etc leben. Kannst du damit etwas machen?

 

[normdew]

AW: CSS Selektoren, Kombinatoren

D. h. ich könnte das hier machen:

div:hover + div h1 {...}

?

 

[normdew]

AW: CSS Selektoren, Kombinatoren

Solche Selektoren sind nicht wirklich notwendig.

Das sehe ich so überhaupt nicht!

Auch kannst du in HTML5 einen Link über divs/h1/etc leben. Kannst du damit etwas machen?

Den Satz verstehe ich jetzt nicht so ... Du meinst ich soll ein a-inline-Element in ein Block-Element verschachteln?

 

[normdew]

AW: CSS Selektoren, Kombinatoren

Der Hinweis und die Erinnerung daran, dass man jedes Element hovern kann, hat mir weitergeholfen. Danke!
hab das jetzt also so gelöst:

div:hover + div h1 {...}

und es hat funktioniert. Dann brauch ich so einen umständlichen Kombinator von innen nach außen nicht!
Manchmal denke ich zu verquer.

 

[Myhar]

AW: CSS Selektoren, Kombinatoren

PS: Doppelposts sind hier nicht so gerne gesehen.

D. h. ich könnte das hier machen:

div:hover + div h1 {...}

?

Wie bereits in meinem ersten Beitrag geschrieben: Ja, natürlich.

Das sehe ich so überhaupt nicht!

Das sehen einige so nicht. Auch ich habe zu Beginn meiner HTML/CSS Laufbahn nicht verstanden, wieso das nicht gehen soll.
Auch wenn mein englisch doch recht passabel ist, aber bedeutet cascading /kaskadieren) nicht, dass es sozusagen "von oben nach unten" läuft?
Ich denke, vor allem Anfänger haben Probleme, hier eine logische und funktionale HTML/CSS Kombination zu finden. Damit möchte ich dich nicht als Anfänger bezeichnen, das ist nur meine persönliche Erfahrung. Ist mir also so ergangen.

Den Satz verstehe ich jetzt nicht so ... Du meinst ich soll ein a-inline-Element in ein Block-Element verschachteln?

Wenn du genau liest: Ja, in HTML5 geht das. Dort ist ein a-Tag nicht mehr inline sondern kann beliebige Elemente enthalten

<a href="https://www.gooogle.at>
<p> Das ist ein toller Absatz über Google</p>
<p> Und weil google so toll ist, verlinken wir auch gleich noch einen Absatz</p>
</a>

Ist invalides (X)HTML4, aber valides HTML5.

 

[normdew]

AW: CSS Selektoren, Kombinatoren

Ist invalides (X)HTML4, aber valides HTML5.

Sehr gut zu wissen! Danke!

 

[randacek_pro]

AW: CSS Selektoren, Kombinatoren

Hallo,

ich fräs mich zwar auch gerade noch durch verschiedene CSS-Hacks und Tuts, um vielleicht irgendwas noch zu finden, aber ich denke mal, so geht das nicht...

Am einfachsten wäre hier sicher eine class-Änderung per Javascript zu realisieren. Gib dem <a> eine ID, lege ein OnMouseOver-Event an und sage, dass bei diesem Event der <h1> eine neue Klasse zugewiesen werden soll. Diese Klasse enthält dann die Formatierungen, welche du haben möchtest.
Ist auch nicht viel Code...

Obwohl, hab gerade mal Myhars Vorschlag probiert - funktioniert perfekt!
Viele Grüße

 

[normdew]

AW: CSS Selektoren, Kombinatoren

Ähm, ja es funktioniert, hatte ich aber auch schon gesagt.Ich bin immer eher offen für eine Lösung erstmal ohne Javascript sondern nur mit CSS. Anschließend folgt dann eine Lösung mit jQuery.