a:hover für einzelne Links
Bernhard
- css
Moin,
ich möchte auf einer Webseite pro Link (!) ein anderes Bild aufpoppen lassen, wenn der Besucher mit der Maus drüberfährt - ohne JavaScript.
Mit CSS habe ich es zustande gebracht, bei allen Links eines div-Abschnittes ein Bild erscheinen zu lassen mit ":hover { background-image:url(BILD.gif); }".
Leider habe ich jetzt eine Menge Links in einem Dokument. Diese Links führen zu einer Bilddatei. Für jedes Bild soll so eine Art Vorschau erscheinen, sobald man mit der Maus düber fährt. Ich habe schon versucht, das a:hover{} in das HTML-Element <a> einzubauen: geht aber nicht.
Noch ne Idee?
Bernhard
...vielleicht noch hinzufügend:
die Links zu den Bildern sind nicht statisch, sondern werden dynamisch erzeugt. Deswegen kann ich keine zentrale Datei *.css erstellen, wo ich diese Pseudoelemente erzeuge (Bsp. div#ID:hover{}). Ich möchte das :hover direkt in das Element einbauen und mit dem Bild hinter dem Link verknüpfen.
hi,
Ich möchte das :hover direkt in das Element einbauen
Das geht mit CSS 2.1 nicht.
und mit dem Bild hinter dem Link verknüpfen.
Muss es denn ein Hintergrundbild sein?
Ein _normales_ Bild könntest du ja im HTML in den jeweiligen Links unterbringen - und das kannst du auch ganz einfach aus- und beim hovern des Links dann einblenden.
gruß,
wahsaga
Hmm,
Ein _normales_ Bild könntest du ja im HTML in den jeweiligen Links unterbringen - und das kannst du auch ganz einfach aus- und beim hovern des Links dann einblenden.
Hast Du ein Stück Code für mich? Für Bilder habe ich bei CSS noch nichts gefunden...deswegen auch das Hintergrundbild :O/
Bernhard
Hi,
Hast Du ein Stück Code für mich? Für Bilder habe ich bei CSS noch nichts gefunden...deswegen auch das Hintergrundbild :O/
ein "normales" Bild - also vermittelter Inhalt - steht im HTML-Code.
Cheatah
Hello out there!
Hast Du ein Stück Code für mich?
Nö. Aber was Besseres: einen Hinweis.
See ya up the road,
Gunnar
Hallo wahsaga.
Ich möchte das :hover direkt in das Element einbauen
Das geht mit CSS 2.1 nicht.
Wobei ich auch die Bemühungen für unsinnig halte. Schließlich ist es doch das Ziel, mittels CSS sämtliche Layoutangaben aus dem HTML zu verbannen.
Das style-Attribut an sich widerspricht bereits dieser Philosophie und die Möglichkeit, bisher in diesem nicht wirksame Selektoren notieren zu können, ist in meinen Augen ebenso widersprüchlich.
Einen schönen Donnerstag noch.
Gruß, Ashura
Wobei ich auch die Bemühungen für unsinnig halte. Schließlich ist es doch das Ziel, mittels CSS sämtliche Layoutangaben aus dem HTML zu verbannen.
99% ACK. Das eine Prozentchen halte ich zurück, weil: immer noch besser als JavaScript *duckundwech* ;o)
Nix für ungut,
Bernhard Heuvel
======================================================================
Also, ich habe folgendes in die html-Datei geschrieben:
Version 1.) <a href="bild.gif" id="bild.gif">BILD</a>
Version 2.) <a href="bild.gif">BILD</a>
Version 3.) <a href="kill.gif" id="bild.gif">BILD</a>
css-Datei geschrieben:
Version 1.) p#eintrag a:hover:after {content: attr(id);} <--geht
Version 2.) p#eintrag a:hover:after {content: url(bild.gif);} <--geht
Version 3.) p#eintrag a:hover:after {content: url(attr(id));}
<--geht nicht
======================================================================
Natürlich wäre es sehr nützlich, wenn ich die dritte Version realisieren könnte, da ich dann eine Perl-generierte Webseite nutzen kann, auf denen verlinkte Bilder beim Drüberfahren mit der Maus angezeigt werden. Habe ich etwas übersehen, daß mir zum Erfolg verhilft ;o)
Zumindest überlegt habe ich mir, ob ich das :hover direkt in das HTML-Element einbinde - das geht aber meines Wissens nicht, da es ein Pseudoelement ist...belehrt mich eines Besseren, falls das doch gehen sollte.
Danke im voraus,
Bernhard Heuvel
Der geht! Zu eurer Information:
Das direkte Formatieren (so auch nicht beliebt...) geht: mit
<a href="Bild.gif" style="a:hover {content:url(Bild.gif);}">BILD</a>
funktioniert es nun. Ich lasse nun eine Reihe von verlinkten Bildern mittels Perl auf einer Webseite ausgeben, die beim Überfahren der Maus sich groß darstellen - wie ein Bilderalbum. Und das ohne Java oder JavaScript. Ich mag CSS ;o) - auch wenn ich es hier vergewaltigt habe. (Schließlich sollten die Formate mit CSS ausgelagert werden, wie auch schon eine Meinung unter diesem Thread laut wurde).
Adios,
Bernhard Heuvel
ging doch nicht - hab nur vergessen zu speichern, so daß die 2.te Version von oben noch eingestellt war....wär ja auch zu schön gewesen. Sch....
Ich geh sterben....
Bernhard Heuvel