Mouseover mit CSS

Darius

Hallo,
ich habe im css folgende Definition für die Links

a:link { text-decoration:none; color:#999999; }
a:visited { text-decoration:none; color:#999999; }
a:hover { text-decoration:underline; color:#999999; }
a:active { text-decoration:underline; color:#999999; }

Nun hätte ich aber gerne, dass die Links auf der Hauptseite durch zwei eckige Klammern eingeklammert werden [], wenn man drüber fährt (hover), also kein underline. Auf allen anderen Seiten kann die Definition so bleiben. Also zwei Fragen:
1. Wie bekomme ich den Hover "[Link]" hin?
2. Wie regele ich,dass dieser hover nur auf der ersten Seite funktioniert und sonst die obige Definition umgesetzt wird?

Danke!
Darius

sejuma

Generell lassen sich Links unterschiedlich darstellen indem man verschiedene Klassen definiert. Z.B.

Code

a.klasse1:link

Dies bezieht sich allerdings nur auf unterschiedliche Formatierungen wie Schriftart, -farbe, -größe, Hintergrundfarbe usw.

Die eckige Klammer ist dagegen kein Formatierungselement sondern ein normales Zeichen. Somit kann ich mir nicht vorstellen, dass man diesen Hovereffekt mit reinem CSS hinbekommt.

Lizzard

Hi,

kann sejuma bedingt zustimmen, zumindest einfach lassen sich die eckigen Klammern nicht darstellen.
Du könntest die Klammern in <span>-Tags hinter und vor dem eigentlichen Linktext einfügen, und die <span>s mit visibility oder display: ein und ausblenden beim Hovern.
Allerdings würde ich da nach Aufwand/Nutzen abwägen

Gruß,

LizZard

sejuma

Lizzard hat mich da auf eine Idee gebracht. Ich habe hierzu den Code für ein CSS-Popup-Fenster etwas umgeschrieben:

CSS

Code

a
{text-decoration:none;}
a.info{
    position:relative;
    z-index:1; background-color:#ccc;
    width:5em;
    display:block;
    text-align:center;
    color:#000;
    text-decoration:none}


a.info:hover{z-index:2; background-color:#ff0}


a.info span{display: none}


a.info:hover span{
    display:block;
    position:absolute;
    top:0em; left:0em; width:5em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}

Alles anzeigen

HTML

Code

<a class=info href="#">Link <span>
[Link]</span></a>

Bei mehreren Links müsstest du dann entsprechend viele Klassen, also info1, info2 usw definieren.
Aber da gebe ich Lizzard ebenfalls recht: Aufwand und Ertrag abwägen. Ob du dann mal später noch durch deinen Quelltext blickst?

Tags

Benutzer online in diesem Thema