Zur Navigation

Linkeigenschaften für Bilder ausschließen

1 elena

Hallo,
ich möchte auf der folgenden Seite die in einer externen css-Datei für den #inhalt a:hover, a:focus festgelegten Eigenschaften ({border-bottom: 1px solid #FFFF00;}) ausschalten, und zwar nur für die Bilder und nur auf dieser Seite. Folgende Eingabe bringt mich nicht weiter:
</script>
<style type="text/css">
#inhalt img a:hover, a:focus {border-bottom:none;}
</style>

http://www.anita-foernges.de/uebungssite/start_html/start_bericht_galerie_suedafrika.html
Ich will damit den "Wackeleffekt" beim FF unterbinden. Neulich hatte ich dieselbe Frage, allerdings bezog es sich da auf eine Tabelle. Hier bezieht es sich nur auf die Bilder.

elena

17.01.2008 10:17

2 Jörg

Hallo elena,

die Verschachtelungsreihenfolge ist ja #inhalt -> a -> img - deswegen funktioniert deine Reihenfolge nicht. Es sollten ja Links angesprochen werden, die sich innerhalb von #inhalt befinden und ein img enthalten. Da letzteres nicht über einen Selektor zu identifizieren ist, würde ich eine Klasse "img" definieren, z.B.:

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Elefant','','../images/reisen/suedafrika/elefant_r.jpg',1)" class="img"><img src="../images/reisen/suedafrika/elefant_n.jpg" alt="Elefant" name="Elefant" width="300" height="203" border="0" id="Elefant" style="padding:10px 30px 0px 30px;" /></a>

Dann kannst du diese folgendermaßen ansprechen:

#inhalt a.img:hover, #inhalt a.img:focus {
border-bottom:none;
}

17.01.2008 10:38 | geändert: 17.01.2008 10:38

3 elena

Danke erst einmal für die rasche Antwort!! Leider habe ich noch eine kleine (oder große) Denkblockade:

Das mit dem Ansprechen ist mir klar. Aber wo definiere ich denn die class="img" ?? Schreibe ich da in die externe css-Datei
.img
{ a:hover, a:focus:border-bottom:none;}

Sorry, wenn ich so dumme Fragen stelle, aber manchmal geht's einfach nicht weiter.

elena

17.01.2008 11:51

4 Jörg

Das class="img" schreibst du direkt in die Link-Tags im HTML-Teil, so wie ich es im ersten Code-Abschnitt in meinem letzten Beitrag beispielhaft angegeben habe

Den zweiten Code-Abschnitt mit der CSS-Definition kannst du entweder in ein style Element im head Bereich der HTML-Datei einbauen:
<style type="text/css">
/* <![CDATA[ */
#inhalt a.img:hover, #inhalt a.img:focus {
border-bottom:none;
}
/* ]]> */
</style>
- dann gilt diese Definiton nur für diese Seite. Du kannst ihn aber auch in die externe CSS-Datei http://www.anita-foernges.de/uebungssite/style.css einbauen - was sinnvoll ist, wenn du diese Klasse auf mehreren Seiten verwenden möchtest

17.01.2008 12:00 | geändert: 17.01.2008 12:05

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]