Farbbalken Mouseover

[Aelfry]

Ich suche nach einer Möglichkeit, dass sich ein farbiger Balken beim Mouseover nach unten erweitert. Gleichzeitig soll der überlagerte Text dann seine Farbe ändern.
(Einsatz für das ganze ist die Navi)

Hier mal eine Skizze wie ich mir das vorstelle:


Ich nehme mal an, das ginge am einfachsten mit jquery oder html5.
Leider konnte ich mit google nichts passendes finden.

Kennt vielleicht jemand ein Beispiel, dass in diese Richtung geht?

 

[JoaSchoen]

AW: Farbbalken Mouseover

hi,
eine Möglichkeit wäre es , mit Flash zu machen.

gruß joachim

 

[Myhar]

AW: Farbbalken Mouseover

Flash ist aber keine ernsthaft zu empfehlende Möglichkeit.
Mit HTML5 wirst du hier keine Erfolge erzielen, da brauchst du CSS3. Ich empfehle dir aber zu einer Javascript Lösung (mit jQuery), da die CSS3 Unterstützung dafür noch relativ gering ausfällt.
Du brauchst jQuery Animate und on (On in Verbindung mit mouseover)

 

[Aelfry]

AW: Farbbalken Mouseover

Du brauchst jQuery Animate und on (On in Verbindung mit mouseover)

Uh, da werde ich mich aber erst mal ordentlich einarbeiten müssen, ehe ich das auf mein Problem adaptieren kann...
Sieht aber zumindest schonmal ganz brauchbar aus. Danke

 

[hellemon]

AW: Farbbalken Mouseover

Ich suche nach einer Möglichkeit, dass sich ein farbiger Balken beim Mouseover nach unten erweitert. Gleichzeitig soll der überlagerte Text dann seine Farbe ändern.
(Einsatz für das ganze ist die Navi)

Hier mal eine Skizze wie ich mir das vorstelle:


Ich nehme mal an, das ginge am einfachsten mit jquery oder html5.
Leider konnte ich mit google nichts passendes finden.

Kennt vielleicht jemand ein Beispiel, dass in diese Richtung geht?

Die Lösung ist mit CSS Sprites zu lösen
http://bueltge.de/css-sprites-einfach-erklaert/675/

Das Beispiel zeigt dir jetzt links Normalzustand - rechts Hover Zustand.

Deine Grafik müsste jetzt Oben Normalzustand - Unten Hoverzustand sein.

#image-link {
  display: block;
  outline: none;
  width: 100px;
  height: 150px;
  background: transparent url(images/navi_1.jpg) 0 0;
  background-position: 0 0;
}

#image-link:hover {
  background-position: 0 150px;
}

wenn das ganze noch ein bisschen Dynamischer werden soll, dann heißt das Lösungwort CSS3 "transition"

#image-link {
  display: block;
  outline: none;
  width: 100px;
  height: 150px;
  background: transparent url(images/navi_1.jpg) 0 0;
  background-position: 0 0;
  -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
       -o-transition: all 0.5s ease-out;
      -ms-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

#image-link:hover {
  background-position: 0 150px;
  -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
       -o-transition: all 0.5s ease-out;
      -ms-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

Grafik sieht so aus -->
Navigation kannst du so rein Zufällig hier ansehen -->

Gruß hellemon