kostenloser Webspace werbefrei: lima-city

Hover effekte auf Links spezifizieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   ghostrider

   

   ghostrider hat kostenlosen Webspace.

   18:57, 17.12.2005

   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. dussel

   

   dussel hat kostenlosen Webspace.

   20:39, 17.12.2005

   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

   

   ghostrider hat kostenlosen Webspace.

   20:53, 17.12.2005

   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. dussel

   

   dussel hat kostenlosen Webspace.

   20:38, 19.12.2005

   
   
   

   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. alopex

   

   alopex hat kostenlosen Webspace.

   22:05, 19.12.2005

   
   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

   

   ghostrider hat kostenlosen Webspace.

   13:28, 20.12.2005

   Ok danke dir hat erfolgreich funktioniert.... thx @ all

8. freshprince

   freshprince hat kostenlosen Webspace.

   13:43, 20.12.2005

   es sollte auch so funktionieren dass du statt einem <div> container einfach <a class="special_hover" href="index.php"></a> machst?!

9. wiwms

   wiwms hat kostenlosen Webspace.

   1:42, 21.12.2005

   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?