PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Hover von Überschriften


juergen
02.05.2011, 19:32:20
Hallo Forum,
ich denke das mein Problem hier richtig ist.
Ich habe auf einer Webseite einen wirklich schönen Effect gesehen.

Sobald ich mit der Maus über einen Text (Ich nehme an DIV Container) gefahren war wurde nur die Überschrift kurz andersfabig. Ich meine die Überschrift wurde von schwarz fade nach grün und dann wieder fade nach schwarz. Der andere Text blieb schwarz und veränderte sich nicht!

<div id=content><h2>Überschrift</h2> Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text </div>

Kann sich einer vorstellen wie das geht? Ich würde gern diesen Effect einsetzten.
Ich denke das es eventuell mit einer JS Klasse wie jQuery oder so zusammen hängt. Aber das könnt Ihr sicher besser beurteilen.

Schon mal danke für Eure Hilfe.

KTB
03.05.2011, 10:55:22
Das Prinzip ist hier (http://cssglobe.com/post/3503/fading-color-effect-for-inline-text-links-using-jquery) erklärt.

juergen
03.05.2011, 15:17:51
Hallo KTB,

Danke für Deine Hilfe aber das hatte ich nicht gemeint. Sicher auch ein schöner Effect.

Stell Dir vor Du würdest mit Deiner Maus über einen Text fahren und die dazugehörige schwarze <H2>Überschrift</H2> würde sich mit fade kurz rot verfärben und wieder mit fade schwarz werden. Genau diesen Effect suche ich.
Es kann sicher sein das es mit der jQuery JS Klasse zu machen ist. Ich für meinen Teil kann das nicht erkennen geschweige denn selbst machen.
Aber ich denke Du hast mich jetzt verstanden.

KTB
04.05.2011, 12:52:49
Hallo juergen,
ich hatte dich schon richtig verstanden. Der Effekt ist dort beschrieben. Ich denke es dürfte für dich nicht das Problem sein aus einem Hover über einen Link einen Hover über ein Container zu machen und dann die entsprechende Überschrift zu färben statt des Links.
Somit kannst du die Überschrift in eine andere Farbe "faden". Um im Anschluss wieder zur schwarzen Farbe zu wechseln genügen zwei weitere Zeilen.
Mach dir mal die Mühe und arbeite dich ein bisschen in jQuery (http://docs.jquery.com/Main_Page) ein.

Als Anreiz habe ich dir das Beispiel von CSSGlobe nach deinem Wunsch abgeändert. Ist natürlich nur auf die Schnelle gemacht, aber als Beispiel gut genug.