Anzeige

komischer a:hover -Effekt

komischer a:hover -Effekt | PSD-Tutorials.de

Erstellt von dagmarsimone, 22.10.2008.

  1. dagmarsimone

    dagmarsimone Nicht mehr ganz neu hier

    Dabei seit:
    04.11.2007
    Beiträge:
    180
    Geschlecht:
    männlich
    komischer a:hover -Effekt
    Hallo ich habe einen Link mit einer Hintergrundfarbe.
    Wenn ich mit der Maus über den Link fahre, soll sich die Hintergrundfarbe ändern. Eigentlich ganz einfach mit a:hover.
    Ich habe aber den Effekt, dass ein kleiner Bereich der alten Hintergrundfarbe zu sehen ist!?
    Bitte um Hilfe.

    Ist beim IE7 der Firefox3.0 funktioniert richtig. (kill bill :))


    HTML:
    1. <div id="headermenue">
    2. <ul>
    3. <li><a href="#">Hyperlink 1</a></li>
    4. <li><a href="#">Hyperlink 2</a></li>
    5. <li id="current"><a href="impressum.html">Hyperlink 3</a></li>
    6. </ul>
    7. </div>

    Code (Text):
    1.  CSS
    2. #current {
    3. color:#000;
    4. background-color: #00FF33;
    5.  }
    6.  
    7. #headermenue {
    8. font-size: 80%;
    9. background-color: #00c;
    10. width: 758px;
    11. padding: 5px 0;
    12. border: 1px solid #fff;
    13. margin: 0 auto;
    14. }
    15. #headermenue ul {
    16. list-style-type: none;
    17. margin: 0px;
    18. padding: 0px;
    19. }
    20. #headermenue li {
    21. display: inline;
    22. margin: 0px;
    23. padding: 0px;
    24. }
    25. #headermenue li a, #headermenue li a:link {
    26. text-decoration: none;
    27. padding: 0 5px;
    28. color: #fff;
    29. }
    30. #headermenue li a:visited {
    31. color: #0c0;
    32. }
    33. #headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
    34. color: #ff3;
    35. background-color:#FF3333;
    36. }
    37.  
    38.  
     
    Zuletzt bearbeitet: 22.10.2008
    #1      
  2. tiroler

    tiroler Hat es drauf

    14
    Dabei seit:
    04.11.2006
    Beiträge:
    2.202
    Geschlecht:
    männlich
    Ort:
    Pfalz und Tirol
    Software:
    CS4, C4D R10
    Kameratyp:
    Canon EOS 400D+L-Obj.
    komischer a:hover -Effekt
    AW: komischer a:hover -Effekt

    mal zum Anschauen:

    CSS - Hover Effekt I

    Links sollen NICHT unterstrichen dargestellt werden und beim Mouse Over soll die Linkfarbe wechseln.

    <html>
    <head>
    <style type="text/css">
    a:link{
    color:#00CC66;
    text-decoration: none
    }
    a:visited{

    color:#ff0000;
    text-decoration: none
    }
    a:hover{color:#f00000;

    text-decoration: none
    }
    a:active{color:#f00000;

    text-decoration: none
    }
    </style>
    </head>
    <body>
    <a href="dein_link.html">Dein Link</a>
    </body>
    </html>

    Erklärungen:

    a:link definiert das Aussehen des Links wenn nichts passiert, also die Mouse ausserhalb des sensitiven Bereichs des Links ist.
    Mit dem Attribut color: #00CC66 wird die Farbe festgelegt.
    a:hover definiert das Aussehen des links, wenn der Internet-User mit der Mouse über den Link fährt.
    Mit dem Attribut color: #FF0000 wird die Farbe festgelegt.
    a:active definiert das Aussehen des Links, wenn der Link aktiviert wird, also - wenn der User auf den Link klick.
    Mit dem Attribut color: #F00000 wird die Farbe festgelegt.
    a:visited definiert das Aussehen des Links, wenn der User den Link schon einmal mit dem Browser aufgerufen (oder besucht) hat.
    Mit dem Attribut color: #000000 wird die Farbe festgelegt.
    text-decoration: none heisst in diesem Fall, das der Link-Text nicht unterstrichen werden soll.


    CSS - Hover Effekt II

    In diesem Beispiel soll Beim Mouse over Hintergrundfarbe und Schriftfarbe des Links farblich wechseln. Damit wir das ganze in eine Navigationsleiste einbinden können, sollten wir zudem die Breite mit dem "display" Attribut festlegen.

    Der CSS Teil (diesmal extern):
    a.linkbeispiel1{
    display:block;
    width:170px;
    color:#000000;
    background:#FFCC00;
    text-align:center;
    text-decoration:none;
    font:normal 14px arial, sans-serif;
    }

    a.linkbeispiel1:hover{
    color:#ffffff;
    text-decoration:none;
    background-color:#006699;
    }

    der HTML Teil:
    <p><a href="#" class="linkbeispiel1">Unser Link</a></p>
    <p><a href="#" class="linkbeispiel1">Unser Link 2</a></p>

    Das Ergebnis:

    Unser Link
    Unser Link 2
     
    #2      
  3. dagmarsimone

    dagmarsimone Nicht mehr ganz neu hier

    Dabei seit:
    04.11.2007
    Beiträge:
    180
    Geschlecht:
    männlich
    komischer a:hover -Effekt
    AW: komischer a:hover -Effekt

    Das ist mir soweit klar, aber Du hast den

    <li id="current"><a href="impressum.html">Hyperlink 3</a></li>

    übersehen!

    Der Effekt tritt nur auf wenn der background von #current durch a:hover überschrieben wird.
     
    #3      
x
×
×
teststefan