Textbox bei Hover
Nach obenZiel:
Es soll eine Art Navigation entstehen, d.h. wenn ich über einen Link fahre soll eine Box auftauchen.
Nach obenWie wirds gemacht?:
Als erstes machen wir uns mal an die ID für den Div container:
#container {
width: 250px;
}
#container a {
color: #000;
text-decoration: none;
}
#container a .box {
display: none;
}
#container a:hover .box {
width: 200px;
display: block;
border: 1px dashed #000;
margin-left: 5px;
}
Nach obenErklärung
Als erstes definieren wir wie breit der Div container mit der ID #container sein soll. Die Einstellungen für den Link sind glaube ich klar. Nun soll der Teil wo der Text drinsteht nicht angezeigt werden, wenn man nicht über den Link fährt, d.h. der span Tag wird durch den Befehl display: none; nicht sichtbar gemacht. Wenn man nun über den Link fährt soll der span Tag sichtbar gemacht werden, dies geht mit dem Befehl display: block;. Auserdem geben wir dem Tag noch einen gestrichelten Rand (border) mit 1px breite und 5px Außenabstand. Das war schon alles.
Nach obenDer HTML-Teil:
Nur mit CSS ist das natürlich nicht möglich. Nun muss nur noch der HTML-Teil gemacht werden. Grundgenommen ist das ganz einfach:
<div id="container">
<a href="#">Dein Hover-Link <span class="box">Der Text, der beim Hover angezeigt werden soll!</span></a>
</div>
Nach obenErklärung:
Der Div container ist wohl klar.... Nun machen wir den Link den wir vorhin definiert haben, diesem geben wir das Ziel #, denn er soll ja nicht irgendwo hinführen. In dem span Tag steht der Text der beim Hovereffekt angezeigt wird.
Hier eine Demo für euch!
fphilipe
Vor dem span sollte noch ein Leerschlag stehen, da es ohne CSS sinnlos aussieht.
Twisting
Hmm ja, ohne Stylesheet sieht das wirklich komisch aus. Curi kannst du bitte noch ein Leerzeichen vor "Der Text,..." im Artikel und im Beispiel hinmachen? Tolles Beispiel :)
q-rios
Habs gemacht. Danke Twisti ;)
fphilipe
ich würde das html ändern:
die class ist überhaupt nicht nötig. die span ist ja auch einmalig im link.
wenn du schon von navigation redest, dann solltest du das div entfernen und eine liste einfügen.
schimmi
ich würde vor dem Text noch 1-2 Leerzeilen einfügen, damit der Mauszeiger nicht über dem Text steht, bzw. man die Maus nicht bewegen muss, um den Text komplett lesen zu können
Kurtis
Hallo alle miteinander! ;-)
Das Beispiel ist echt super und genau das, was ich gesucht habe. Hier noch eine Ergänzung damit ein evtl. Text unter der "HoverBox" nicht nach unten verschoben wird.
#container position:relativ hinzufügen
und bei #container a:hover .box position: absolute; z-index: 1; hinzufügen.
mit positiven margin Zahlen kann man dann die Box schön nach rechts positionieren und mit negativen nach links.
Hoffe ich spamme hier nicht rum!
Liebe Grüße
Kurtis