Supportnet / Forum / Webseiten/HTML
CSS - Grafiken und Text per MouseOver verändern
Frage
Ich habe ein Menü erstellt nach diesem Muster ([url=http://www.cssplay.co.uk/menus/flickerfree_mk3.html]klick[/url]). Hier der dazugehörige Code:
[i][u]CSS:[/u]
#menu {display:block; height:110px;}
#menu ul {margin:0; padding:0; list-style-type:none;}
#menu li {margin-right:1px; display:block; width:115px; border:1px solid #000;}
#menu li.list1 {background:transparent url(../toys/toy1_bw.jpg);}
#menu li.list2 {background:transparent url(../toys/toy2_bw.jpg);}
#menu li.list3 {background:transparent url(../toys/toy3_bw.jpg);}
#menu li.list4 {background:transparent url(../toys/toy4_bw.jpg);}
#menu a {display:block; width:115px; padding-top:86px; height:0; color:#000; text-decoration:none; overflow:hidden;}
* html #menu a:link, * html #menu a:visited {height:86px; he\ight:0;}
#menu a#item1 {background:transparent url(../toys/toy1.jpg) -115px -86px no-repeat;}
#menu a#item2 {background:transparent url(../toys/toy2.jpg) -115px -86px no-repeat;}
#menu a#item3 {background:transparent url(../toys/toy3.jpg) -115px -86px no-repeat;}
#menu a#item4 {background:transparent url(../toys/toy4.jpg) -115px -86px no-repeat;}
#menu a#item1:hover {background-position:top right; z-index:50;}
#menu a#item2:hover {background-position:top right; z-index:50;}
#menu a#item3:hover {background-position:top right; z-index:50;}
#menu a#item4:hover {background-position:top right; z-index:50;}
* html #menu a:hover {height:86px; he\ight:0;}
[u]HTML:[/u]
<div id="menu">
<ul>
<li class="list1"><a id="item1" href="#nogo" title="Item 1">Item 1</a></li>
<li class="list2"><a id="item2" href="#nogo" title="Item 2">Item 2</a></li>
<li class="list3"><a id="item3" href="#nogo" title="Item 3">Item 3</a></li>
<li class="list4"><a id="item4" href="#nogo" title="Item 4">Item 4</a></li>
</ul>
</div>[/i]
Der Unterschied der o.g. URL zu diesem Code ist der, dass die Grafiken nicht nebeneinander, sondern untereinander angezeigt werden.
Wie kann man das ganze so modifizieren, dass beim Überfahren der Grafik mit der Maus nicht nur die Grafik selber ausgetauscht wird, sondern neben der Grafik auch noch ein Text (z.B. "Startseite" oder "Kontakt" angezeigt wird?
Antwort 1 von MoRe99
Schau dir mal diese Seite an:
thestyleworks.de
Da erscheint beim Überfahren der einzelnen Artikelnamen links oder beim Überfahren der Menüpunkte Schnellreferenz, Referenz etc. ein kompletter Text. Vertief dich in die CSS der Seite; dneke mir, das ist eine Seite, die dir weiter helfen kann.
Und die auch sonst eine wahre Fundgrube in Sachen CSS ist.
thestyleworks.de
Da erscheint beim Überfahren der einzelnen Artikelnamen links oder beim Überfahren der Menüpunkte Schnellreferenz, Referenz etc. ein kompletter Text. Vertief dich in die CSS der Seite; dneke mir, das ist eine Seite, die dir weiter helfen kann.
Und die auch sonst eine wahre Fundgrube in Sachen CSS ist.
Antwort 2 von rfb
Antwort 3 von sutadur
Vielen Dank für die Hinweise. Aber das ist nicht das, was ich meinte. Ich möchte keine ausdrückliche Infobox anzeigen, sondern lediglich ergänzend neben der Grafik ein einzelnes Wort, wenn man mit der Maus über die Grafik fährt. Trotzdem habe ich die den Vorschlag mit der Infobox aufgegriffen und versucht, umzusetzen. Leider komplett ohne Erfolg. Insbesondere ist es mir nicht gelungen, per CSS zugleich den Hover-Effekt (Tausch der Grafik) und die Anzeige der Infobox in einem Link zu definieren.
Antwort 4 von luke
mit dem text daneben, das lässt sich mit javascript machen, aber sonst wüsste ich nicht wie