Ergebnis 1 bis 4 von 4

Thema: Mouseover mit CSS

  1. #1
    Darius
    Gast

    Standard Mouseover mit CSS

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

  3. #3
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    München
    Beiträge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    CSS
    Code:
    a
    &#123;text-decoration&#58;none;&#125;
    a.info&#123;
        position&#58;relative;
        z-index&#58;1; background-color&#58;#ccc;
        width&#58;5em;
        display&#58;block;
        text-align&#58;center;
        color&#58;#000;
        text-decoration&#58;none&#125;
    
    a.info&#58;hover&#123;z-index&#58;2; background-color&#58;#ff0&#125;
    
    a.info span&#123;display&#58; none&#125;
    
    a.info&#58;hover span&#123;
        display&#58;block;
        position&#58;absolute;
        top&#58;0em; left&#58;0em; width&#58;5em;
        border&#58;1px solid #0cf;
        background-color&#58;#cff; color&#58;#000;
        text-align&#58; center&#125;
    HTML
    Code:
    <a class=info href="#">Link <span>
    &#91;Link&#93;</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?

Ähnliche Themen

  1. Mouseover
    Von Posi im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.11.2006, 14:35
  2. mouseover
    Von Poketyce im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 30.09.2006, 12:57
  3. mouseover
    Von cthulhu im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 29.09.2006, 08:53
  4. Mouseover
    Von Gigazone im Forum HTML & CSS Forum
    Antworten: 31
    Letzter Beitrag: 25.05.2005, 23:00
  5. Mouseover
    Von starnet im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 18.11.2004, 17:14

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •