Willkommen in der Webstatt Zum Webstatt Blog und Stories
crooked am 07.09.06 17:22

hi,
ich möchte gerne so einen hovereffekt oder wies heißt hinter dem wort haben.. bsp: http://wiki.python.de/FAQ -> bei "Wie fange ich als Einsteiger an?" das '#'
wie mach ich sowas? im css von da stehts so:
h1 id="ChannelTeilnehmer">Channel-Teilnehmer <a href="#ChannelTeilnehmer" class="hashlink">#</a></h1>
und CSS:
/* hashlink */
a.hashlink {
color: white;
text-decoration: none;
font-weight: bold;
}
a.hashlink:hover {
color: #777!important;
}

h1:hover a.hashlink,
h2:hover a.hashlink,
h3:hover a.hashlink,
h4:hover a.hashlink,
h5:hover a.hashlink,
h6:hover a.hashlink {
color: #ccc;

aber ich habe hashlink noch nie gehört.. hat wer n link dazu? (google war erfolglos :()
}

netcup.de Warum gibt es hier Werbung?
leo am 07.09.06 18:16

"hashlink" kennzeichnet hier nur eine css-klasse, die könnte auch "crooked-ist-bei-webstatt" oder so heißen.

vom prinzip her:

1) a.hashlink { }
die farbe von "#" wird auf die hintergrundfarbe "#fff" gesetzt

2) a.hashlink:hover { }
hier sind wird schon, where the magic happens - zumindest für den IE, color wird auf einen sichtbaren wert "#777" gesetzt

3) h1:hover a.hashlink { } usw
das können alle außer dem bösen IE, der kann den hover pseudoselektor nur auf links, nicht auf andere elemente (wie halt zB h1, h2, div, p usw) anwenden.

also das prinzip ist:
- verstecken
- bei hover anzeigen.


<a href="#">blablub<span> #</span></a>

a span {
display: none
}

a:hover span {
display: inline
}

das wäre mal ne alternative ausführung. auf das wesentliche verkürzt.

gruß, leo.

Christian am 07.09.06 18:18

Is ne ganz normale klasse
wenn er normal ist (nicht hover) hat die raute die hintergrundfarbe (white) und bei hover eben was anderes ;)

€ 2 late :(

crooked am 07.09.06 18:32

danke :D *in-CSS-Abteil-des-gehirns-speicher*

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt