Hover Effekt nicht auf alle Links anwenden.

[katschipatschi]

Wie meine Titel schon sagt, hat jemand eine Idee wie das funktioniert? Habe leider mit der Suche nichts gefunden.
Habe in der css datei folgenden hover effekt definiert:

}
 
 a:visited{
 
 color:#3e1f06;
 text-decoration: none
 
 }    
     
 a:link{
 
     color:#3e1f06;
     text-decoration: none
 
 
 }
 a:hover{color:#6a9b32;
         text-decoration: none

Ich will aber dass dieser Effekt nicht auf allen links wirkt.auf diese links soller nicht wirken. die sollen einfach nur weiß bleiben, ohne hover effekt:

<div id="footer2_galerie">
    <div id="link1"><a href="haus.html">Haus</a></div>
    <div id="link2"><a href="bauernhof.html">Bauernhof</a></div>
    <div id="link3"><a href="wellness.html">Wellness</a></div>
    <div id="link4"><a href="galerie.html">Galerie</a></div>
    <div id="link5"><a href="kontakt.html">Kontakt</a></div>

</div>

jemand eine Ahnung wie ich das hinbekomme??

 

[Myhar]

AW: Hover Effekt nicht auf alle Links anwenden.

Indem du diesen Links einen eigenen Hover-Style zuweist (und dort die Farbe auf die Ursprungsfarbe setzt)

#footer2_galerie a:hover {
  /*deine Styles für die Links */
}

Im Hinblick auf die Accessability ist aber davon abzuraten, für Links keinen Hoverstatus zu definieren. Es ist sonst nicht ersichtbar, welcher Link gerade aktiv ist bzw. bemerkt man unter Umständen nicht, dass man sich überhaupt auf einem Link befindet.

L. G.

 

[Lelleck]

AW: Hover Effekt nicht auf alle Links anwenden.

Hallo,
ich habe ein ähnliches Problem, was hierzu passt.
Ich nutze auch einen Hover-Effekt für Links, den ich in der css Datei definiert habe.

Verwende ich nun allerdings Bilder oder Icons als Grundlage für den Link, dann "springen" die Bilder immer beim drüber fähren etwas hoch. Ist allerdings auch nur im IE so, der FF macht das nicht.

Kann ich dem IE das irgendwie abgewöhnen?

Gruß
Lelleck

 

[cebito]

AW: Hover Effekt nicht auf alle Links anwenden.

Und... ? Sollen wir raten? Klick mal die rote Zeile in meiner Sig, lies, dann aktualisiere deinen Post.

 

[Lelleck]

AW: Hover Effekt nicht auf alle Links anwenden.

Und... ? Sollen wir raten? Klick mal die rote Zeile in meiner Sig, lies, dann aktualisiere deinen Post.

Hallo cebito,
Du hast natürlich recht, ein wenig Code hilft das Problem zu erkennen:

a:hover{ text-decoration:none; background-color:#CCCCCC; }

Diesen Code habe ich in meiner CSS Datei stehen.

Bei einem a href Link sorgt es dafür, dass der Hintergrund grau hinterlegt wird.

Wenn ich aber ein img-Objekt mit einem a href versehe, weil das Bild oder das Icon selbst als Link fungieren soll, dann greift der Hover-Effekt und somit die Hintergrundfarbe auch.
Ich möchte diese "Eigenschaft" also für Links wo ein Bild im a href Tag eingeschlossen ist, abschalten.
Also vom Prinziep her wie in der Ursprünglichen Frage von katschipatschi.

Abgeschaltet haben möchte ich es deshalb, weil es im IE dafür sorgt, dass die Bilder/Icons grau Hinterlegt werden, wenn man drüber fährt, und dabei leicht nach oben springen.

Gruß
Lelleck

 

[Mike_K]

AW: Hover Effekt nicht auf alle Links anwenden.

a img{
background-color:transparency;
margin:0;
padding:0;
}

sollte das Problem lösen.

Wenn Du im IMG-Tag allerdings border="0" angegeben hast, dürfte das Problem nicht auftreten. Hast Du irgendwo anders den verlinkten Images Hover-Eigenschaften gegeben?

Gruß Mike

 

[Lelleck]

AW: Hover Effekt nicht auf alle Links anwenden.

Hallo Mike,

danke für Deine Antwort.

Beim lesen dachte ich mir: "na klar, ist ja logisch".

Allerdings funktioniert es nicht.

Es ist kurios, bzw. sehe ich vermutlich einfach den Wald vor lauter Bäumen nicht:
In meiner css-Datei sage ich:

a:hover{ text-decoration:none; background-color:#CCCCCC; }

Das sogt dafür, dass meine Textlinks schön grau hinterlegt werden, wenn man drüber fährt.

Bei verlinkten Bildern sogt der css-Eintrag ebenfalls dafür, dass sie grau hinterlegt werden. Und zwar bildet sich beim drüber fahren am unteren Rand ein schmaler grauer Streifen. Dadurch wird das Bild 1-2 pixel "höher", und alles was drunter steht, wird etwas runter geschoben, dadurch entsteht der Eindruck, als würde das Bild "springen".

Nun ist mir folgendes noch aufgefallen. Das verlinkte Bild befindet sich innerhalb einer Tabelle. Der html Code lautet:

<[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]table[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]width[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="100%"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]cellspacing[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="20px"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]border[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="0">[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]tr[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]align[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="center">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]td[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]><[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="link.php"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]target[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="_self"><[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]img[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]src[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="bild.jpg"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]width[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="100"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]height[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="100"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]alt[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="Bildbezeichnung"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]border[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="0"></[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]></[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]td[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]......[/COLOR][/SIZE]
[/COLOR][/SIZE]

Dieses Bild "springt" beim drüber fahren, allerdings nur im IE 9 (andere noch nicht getestet). Im FF passiert nichts, da ist alles OK.

Nun ist es aber so, dass ich auf einer anderen Seite noch mal das gleiche mache (mehrere verlinkte Bilder in einer Tabelle). Hier passiert weder im FF noch im IE etwas. Das Bild "springt" jeweils nicht. Hier ist der Quellcode:

<[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]table[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]width[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="100%"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]cellspacing[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="20px"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]border[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="0">[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]tr[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]td[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]align[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="center"><[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]href[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="link.php"><[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]img[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]src[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="bild.jpg"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]border[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="0"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]height[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="120"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]width[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="120"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]align[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="middle"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]alt[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]="Bildbezeichnung"></[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]></[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]td[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]......[/COLOR][/SIZE]
[/COLOR][/SIZE]

Mal abgesehen von Kleinigkeiten, behaupte ich, dass das doch grob das gleiche bewirken sollte. Ich sehe den entscheidenden Unterschied nicht.

Was ich jetzt auch noch mal probiert hatte waren solche Konstellationen wie:

a:hover img {....}

aber das brachte auch alles nichts :-(

Falls noch jemand eine Idee hat, wäre ich Dankbar.

Gruß
Lelleck

(die Leerzeichen in den CODE-Abschnitten sind offensichtlich beim reinkopieren verloren gegangen, im Quellcode sind natürlich entsprechende Leerzeichen.)

PS:
Zumindest laut dem W3C Markup Validation Service ist sowohl mein html Code, als auch mein css Code valide.

 

[Mike_K]

AW: Hover Effekt nicht auf alle Links anwenden.

Auf den ersten Blick kann ich auch keinen merklichen Unterschied feststellen. Und dass das Bild "springt" ist auch seltsam. Hast Du mal geprüft welche Anweisungen angewendet werden, wenn Du über das Bild "hoverst"?
Das kannst Du am besten mit dem "Firebug" PlugIn für den FF prüfen.

Gruß Mike

 

[Lelleck]

AW: Hover Effekt nicht auf alle Links anwenden.

Hallo,

so, ich habe mein Problem gelöst, aber ist doch schon recht merkwürdig.

@Mike: Mit Firebug habe ich nichts rausfinden können.

Ich habe das Problem dann noch mal von hinten aufgezogen. Ich habe mir noch mal die Links angeschaut, und nach Unterschieden verglichen.
Der entscheidende war das align-Tag.
Sobald ich dieses jetzt hinzugefügt habe, "springt" mein Bild nicht mehr.

Ich hab´s ehrlich gesagt nicht verstanden, aber wenigstens ist es jetzt vom Tisch.

Danke & Gruß
Lelleck

 

[Mike_K]

AW: Hover Effekt nicht auf alle Links anwenden.

Ich hab´s ehrlich gesagt nicht verstanden,

Ich verstehs auch nicht! Echt seltsam

aber wenigstens ist es jetzt vom Tisch.

Das ist wohl war!