Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „komischer a:hover -Effekt“

dagmarsimone

Nicht mehr ganz neu hier

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;
}
 
Zuletzt bearbeitet:

tiroler

Hat es drauf

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

Nicht mehr ganz neu hier

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
174.476
Beiträge
2.577.967
Mitglieder
65.962
Neuestes Mitglied
seppeldeluxe
Oben