Antworten zum Thema „komischer a:hover -Effekt“

dagmarsimone · 22.10.2008

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:

<div id="headermenue">
<ul>
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a></li>
<li id="current"><a href="impressum.html">Hyperlink 3</a></li>
</ul>
</div>

Code:

 CSS
#current {
color:#000;
background-color: #00FF33;
 }
 
#headermenue {
font-size: 80%;
background-color: #00c;
width: 758px;
padding: 5px 0;
border: 1px solid #fff;
margin: 0 auto;
}
#headermenue ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#headermenue li {
display: inline;
margin: 0px;
padding: 0px;
}
#headermenue li a, #headermenue li a:link {
text-decoration: none;
padding: 0 5px;
color: #fff;
}
#headermenue li a:visited {
color: #0c0;
}
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
color: #ff3;
background-color:#FF3333;
}

tiroler · 22.10.2008

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:

dagmarsimone · 23.10.2008

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.