CSS Info Text bei Mouseover
Sie haben eine Seite mit Fachbegriffen oder möchten einige Wörter beschreiben. Dann wäre dieser
CSSCSS
CSS ist eine abkürzung für Cascading Style Sheets
Workshop genau das Richtige.
Wie funktioniert dies? Der Info Text wird durch den CSS Befehl visibility: hidden; ausgeblendet. Sobald man den Link mit der Maus berührt, kreift die CSS anweisung a.infotext:hover span und visibility: hidden; wird auf visibility: visible; gesetzt und macht somit den Infotext sichtbar.
In der CSS unter a.infotext:hover span finden Sie auch eine Breiten angabe. Diese kann nach belieben geändert oder sogar entfernt werden.
Dies ist ein Beispiel des Workshops "Info Text bei Mouseover. Der Link führt Sie zu dieser Seite.
Fügen Sie dazu diesen Code in Ihre CSS Datei ein:
text-decoration: none
}
a.infotext:hover {
background: #FFFFFF;
text-decoration: none;
}
a.infotext span {
visibility: hidden;
position: absolute;
left: 20em;
margin-top: 10em;
padding: 1em;
text-decoration: none;
}
a.infotext:hover span {
visibility: visible;
border: 1px solid #347BEE;
color: #000000;
background: #FFFFFF;
text-decoration: none;
width: 200px;
}
Den Code an die gewünschte stelle zwischen <body> und </body> ihrer Seite einfügen:
Falls Sie bei Ihren Info Text einen Titel möchten, benutzen Sie diesen Code:
Möchten Sie keine Seite verlinken, entfernen Sie den Befehl target="_blank" und ersetzen Sie dazu bei href die adresse der Seite durch ein #info. Eigentlich könnte man auch nur ein # oder nur <a> schreiben. Bei einer Raute würde aber die Seite bei Mozilla nach oben springen, und wenn man <a> angibt funktioner dies beim Internet Explorer nicht. Es sollte auch kein Anker namens info existieren. Sollte dies jedoch der Fall sein, ändern Sie #info in #irgendwas-anderes.
