kostenloser Webspace werbefrei: lima-city


Hover effekte auf Links spezifizieren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    ghostrider

    Kostenloser Webspace von ghostrider

    ghostrider hat kostenlosen Webspace.

    Hi Leutz

    Wie kann ich den CSS Hover effekt auf einige Links auf der HP einsetzen und f?r anderen einen anderen Hover effekt. Habe momentan folgendes:

    CSS:
    #special_hover
    {
    A:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
    A:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
    A:active {COLOR: #FFFFFF; TEXT-DECORATION: none}
    A:hover {COLOR: #ff0000; TEXT-DECORATION: none}
    }
    A:link {COLOR: #000000; TEXT-DECORATION: underline}
    A:visited {COLOR: #000000; TEXT-DECORATION: underline}
    A:active {COLOR: #000000; TEXT-DECORATION: underline}
    A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}

    Link:
    <div align="center" id="special_hover"><a href="index.php">Startseite</a></div>

    Hoffe auf Hilfe
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. so m?sste es gehen:

    <div align="center" id="special_hover"><a href="index.php" class="hover2">Startseite</a></div>

    a.hover2:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
    a.hover2:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
    a.hover2:active {COLOR: #FFFFFF; TEXT-DECORATION: none}
    a.hover2:hover {COLOR: #ff0000; TEXT-DECORATION: none}


    (so mach ichs halt!)
  4. Autor dieses Themas

    ghostrider

    Kostenloser Webspace von ghostrider

    ghostrider hat kostenlosen Webspace.

    Jo danke funktioniert kannst du mir vielleicht noch ebend sagen wie ich die schriftgr??e und schriftart per css einstellen kann (also auch nur in dem hover2 effekt)

    Beitrag ge?ndert am 17.12.2005 20:54 von ghostrider


  5. ghostrider schrieb:
    Jo danke funktioniert kannst du mir vielleicht noch ebend sagen wie ich die schriftgr??e und schriftart per css einstellen kann (also auch nur in dem hover2 effekt)

    Beitrag ge?ndert am 17.12.2005 20:54 von ghostrider


    ja, so:
    (m?sste so gehen:)

    einfach das noch dazu einbauen:

    font-family : Verdana,sans-serif;
    font-size : 10pt;

    also so;

    a.hover2:link
    {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    font-family : Verdana,sans-serif;
    font-size : 10pt;
    }

    a.hover2:visited
    {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    font-family : Verdana,sans-serif;
    font-size : 10pt;
    }

    a.hover2:active
    {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    font-family : Verdana,sans-serif;
    font-size : 10pt;
    }

    a.hover2:hover
    {
    COLOR: #ff0000;
    TEXT-DECORATION: none;
    font-family : Verdana,sans-serif;
    font-size : 10pt;
    }

  6. so m?sste es gehen:

    <div align="center" id="special_hover"><a href="index.php" class="hover2">Startseite</a></div>

    a.hover2:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
    a.hover2:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
    a.hover2:active {COLOR: #FFFFFF; TEXT-DECORATION: none}
    a.hover2:hover {COLOR: #ff0000; TEXT-DECORATION: none}


    (so mach ichs halt!)


    Es ist bei vielen Links l?stig, wenn man dauernd das CLASS-Attribut mit hinschreiben muss. Da sich die Links sowieso in im DIV mit einer eigenen ID stehen kannst du das CSS auch so bauen:

    div.special_hover a:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
    div.special_hover a:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
    div.special_hover a:active {COLOR: #FFFFFF; TEXT-DECORATION: none}
    div.special_hover a:hover {COLOR: #ff0000; TEXT-DECORATION: none}

    Dann kannst du das HTML so schreiben:

    <div align="center" id="special_hover"><a href="index.php">Startseite</a></div>

    Trotzdem werden dann die Links im DIV "special_hover" anders "gehovert", als die normalen Links.

  7. Autor dieses Themas

    ghostrider

    Kostenloser Webspace von ghostrider

    ghostrider hat kostenlosen Webspace.

    Ok danke dir hat erfolgreich funktioniert.... thx @ all
  8. es sollte auch so funktionieren dass du statt einem <div> container einfach <a class="special_hover" href="index.php"></a> machst?!
  9. und gleich mal angew?hnen: statt pt und px sollte em als font-size angegeben werden.

    Standard:

    body {
    font-size:62.5%
    ....
    }

    und dann immer bei den Elementen font-size: 1em angeben... wenn ich das jetzt noch alles richtig in Erinnerung habe, dann entspricht das einer Schriftgr?sse von 10px und 1.2 em w?ren 12 px etc...
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!