Spezieller Onmouseover-Effekt an zweiter Stelle (mit Lösung!)

[sven]

Hallo!

Nun muss ich mich doch auch einmal im Forum melden, da mir scheinbar weder Suchmaschine noch selfHTML helfen konnten.

Es geht um eine Navigation, bestehend aus Textlinks, die ich schon mit Hovereffekten (Hintergrundfarbe etc) versehen habe. Nun möchte ich zu jedem Link noch eine kleine Beschreibung sichtbar machen - ebenfalls bei Mouseover.

Könnte man vielleicht mit weiteren DIVs eine Hoverfunktion bestimmen, sodass alle Navigationslinks beim jeweiligen Hovern eine jeweilige kleine temporäre  Beschreibung an der gleichen Stelle (z.B. definiert durch Randabstand in CSS) erzeugen?

Nur wie realisiere ich das? Ich verwende divs, aber keine Frames. Auch auf Inlineframes möchte ich verzichten. In Javascript habe ich das hier gefunden http://www.christoph-schnauss.de/prog/javascript/menu4.php, aber nur für Bilderlinks. Wie mache ich das mit Textlinks? Und ist dafür überhaupt Javascript vonnöten? Ich würde gerne drauf verzichten. Am besten nur mit HTML oder CSS. Und natürlich möglichst allbrowserkompatibel.

Code-Beispiel für Lösungsvorschläge:

<a class="menu" href="links.html">Auswege</a>

Nun soll weiter unten unter der Navigation (meinetwegen auch noch in der gleichen Tabelle) das Wort "Links" auftauchen, wenn man den Textlink mouseovert. Und das dann bei allen Menüpunkten.

Den Beschreibungstext in die gleiche Zeile zu packen wie der jeweilige Textlink und mit Hilfe von Hintergrundfarben und Hoverlinkfarben beim Hovern sichtbar zu machen, habe ich schon versucht, klappt auch, hat nur den Nachteil dass dadurch zu viel Text in der Zeile ist, und letztendlich meine Navigationstabelle in ihrer Breite gesprengt wird...

---

JA! Jetzt hab ichs in letzter Minute doch selbst gefunden! Aber da ich das hier schon so schön geschrieben habe, schick ich den Beitrag doch ab, vielleicht hilfts ja jemandem, der das gleiche Problem hat!

Realisierung mit CSS und ohne JS:
http://meyerweb.com/eric/css/edge/popups/demo.html

MfG
Sven

[Wilhelm Turtschan]

habe d'ehre sven

Könnte man vielleicht mit weiteren DIVs eine Hoverfunktion bestimmen, sodass alle Navigationslinks beim jeweiligen Hovern eine jeweilige kleine temporäre  Beschreibung an der gleichen Stelle (z.B. definiert durch Randabstand in CSS) erzeugen?

Schau Dir auch mal [http://css.fractatulum.net/sample/menu2format_demo.htm] an.

man liest sich
Wilhelm

[Snafu]

Hallo!
...
Es geht um eine Navigation, bestehend aus Textlinks, die ich schon mit Hovereffekten (Hintergrundfarbe etc) versehen habe. Nun möchte ich zu jedem Link noch eine kleine Beschreibung sichtbar machen - ebenfalls bei Mouseover.

Wenns nur eine kurze Beschreibung ist ohne Bilder o.Ä. reicht das title Attribut doch.

  
...  
<a href="./meinedatei.html" title="Textlink">I am so smart, I am so smart, S M R T.. I mean S M A R T</a>  
...  

[trunx]

Hallo, hab mir das mal angesehen ist ganz nett, aber im IE funktioniert das wie folgt nicht:
<a href=".."><img ..thumb><span><img ..big></span></a>
also mit zwei Bildern - das span Element hab ich eingeführt, um über css auf das zweite img zugreifen zu können.

bye trunx

[wahsaga]

hi,

Hallo, hab mir das mal angesehen ist ganz nett, aber im IE funktioniert das wie folgt nicht:
<a href=".."><img ..thumb><span><img ..big></span></a>
also mit zwei Bildern -

Doch auch, das funktioniert.
Man muss nur die kleine Macke des IE kennen - er rendert Kindelemente eines Links bei :hover erst dann neu, wenn auch eine Änderung der Formatierung des Links selber stattfindet. Es reicht bspw. schon, die Hintergrundfarbe von #ffffff auf die Kurzschreibweise #fff zu ändern.

das span Element hab ich eingeführt, um über css auf das zweite img zugreifen zu können.

Nutze dafür lieber eine Klasse, anstatt ansonsten sinnfreie weitere HTML-Elemente einzufügen.

gruß,
wahsaga

[trunx]

Hi,

Man muss nur die kleine Macke des IE kennen - er rendert Kindelemente eines Links bei :hover erst dann neu, wenn auch eine Änderung der Formatierung des Links selber stattfindet. Es reicht bspw. schon, die Hintergrundfarbe von #ffffff auf die Kurzschreibweise #fff zu ändern.

Ausprobiert in mehreren Varianten, aber der IE bleibt hartnäckig :-(,
hier mein Versuch:

<STYLE TYPE="TEXT/CSS">
a img.popup { height: 0px; width: 0px; border: 0px; color: #ffffff; }
a:hover img.popup { height: auto; width: auto;
  position: absolute; top: 0px; left: 0px; z-index: 100; color: #fff; }
</STYLE>

<a href=""><img src="..thumb" /><img class="popup" src="..big" /></a>

Kannst du mir sagen, was falsch ist?

Danke

[wahsaga]

hi,

Ausprobiert in mehreren Varianten, aber der IE bleibt hartnäckig :-(,
hier mein Versuch:

<STYLE TYPE="TEXT/CSS">
a img.popup { height: 0px; width: 0px; border: 0px; color: #ffffff; }
a:hover img.popup { height: auto; width: auto;
  position: absolute; top: 0px; left: 0px; z-index: 100; color: #fff; }
</STYLE>

<a href=""><img src="..thumb" /><img class="popup" src="..big" /></a>

Kannst du mir sagen, was falsch ist?

Die formulierte Bedingung

[der IE] rendert Kindelemente eines Links bei :hover erst dann neu, wenn auch eine Änderung der Formatierung des Links selber stattfindet.

wird nicht erfüllt.

Ändere nicht nur Formatierungen für die Elemente, die der Selektor a:hover img.popup auswählt - sondern auch mindestens eine für a:hover selber.

gruß,
wahsaga

[trunx]

Hi,

mein Gott, ist es schwer, ne konkrete Antwort zu geben! Auch

<STYLE TYPE="TEXT/CSS">
a img.popup { height: 0px; width: 0px; border: 0px; color: #ffffff; }
a:hover img.popup { height: auto; width: auto;
  position: absolute; top: 0px; left: 0px; z-index: 100; color: #fff; }
a { color:#eeeeee; }
a:hover { color:#eee; }
 </STYLE>

<a href=""><img src="..thumb" /><img class="popup" src="..big" /></a>

sowie verschiedene Reihenfolgen (Permutationen) von a, a:hover, a img:popup und a:hover img.popup führten nicht zum Erfolg, es wär nett, wenn du mal nen funktionierenden Code reinstellst, damit man weiß, was du meinst.

vielen Dank trotzdem :-)

bye trunx

[wahsaga]

hi,

mein Gott, ist es schwer, ne konkrete Antwort zu geben!

wahsaga genügt.

Ggf. mal mit der von mir vorgeschlagenen Eigenschaft statt color versuchen - evtl. funktioniert der Workaround nicht mit beliebigen Eigenschaften.

gruß,
wahsaga

[Struppi]

mein Gott, ist es schwer, ne konkrete Antwort zu geben! Auch

<STYLE TYPE="TEXT/CSS">
a img.popup { height: 0px; width: 0px; border: 0px; color: #ffffff; }
a:hover img.popup { height: auto; width: auto;
  position: absolute; top: 0px; left: 0px; z-index: 100; color: #fff; }
a { color:#eeeeee; }
a:hover { color:#eee; }
</STYLE>

<a href=""><img src="..thumb" /><img class="popup" src="..big" /></a>

funktioniert bei mir im IE 7.

Struppi.

[trunx]

funktioniert bei mir im IE 7.

vielen Dank

bye trunx