Antworten auf deine Fragen:
Neues Thema erstellen

Hover Effekt nicht auf alle Links anwenden.

katschipatschi

Nicht mehr ganz neu hier

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:

Code:
}
 
 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:

Code:
<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

Hat es drauf

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)
Code:
#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

Noch nicht viel geschrieben

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

undefined

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

Noch nicht viel geschrieben

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:
Code:
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

Nicht mehr ganz neu hier

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

Lelleck

Noch nicht viel geschrieben

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:
Code:
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:
Code:
<[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:
Code:
<[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:
Code:
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

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.354
Mitglieder
67.532
Neuestes Mitglied
Florian Beckers
Oben