Rahmen um Vorschaubilder beim Hovern

[Daniel Belzer]

Hallo zusammen,

ich habe mir für meinen Homepageentwurf gedacht, die Vorschaubilder umranden zu lassen. Das soll mithilfe dieses Befehls geschehen:

a:hover {border:1px solid #A9A9A9; padding:2px; background-color:#DCDCDC }

Wie man sich vorstellen kann, wird dieser Befehl allerdings auf alle Links angewandt, sowohl auf die Textlinks, wie auch andere Bildlinks, die jedoch allesamt von diesem Effekt "verschont" bleiben sollen.

Wie kann ich es anstellen, dass dieser Effekt nur auf die Vorschaubilder (Thumbnails) angewandt wird ?

Vielen Dank
D. Belzer

[David Tibbe]

Hallo Daniel,

Wie kann ich es anstellen, dass dieser Effekt nur auf die Vorschaubilder (Thumbnails) angewandt wird?

Weise den Thumbnail-Links eine eigene CSS-Klasse zu. Nur dieser verpasst du dann jenen hover-Effekt.

Grüße
  David

[Daniel Belzer]

Weise den Thumbnail-Links eine eigene CSS-Klasse zu. Nur dieser verpasst du dann jenen hover-Effekt.

Hmmh, ich arbeite mit einem externen Stylesheet. Wie soll ich einer eigenen Klasse einen eigenen Hover-Effekt zuweisen ?

<!--
.rahmenUmBilder {
  b:hover { ... }
-->

Eine kleine Erklärung wäre hilfreich.

Vielen Dank
D. Belzer

[Ashura]

Hallo Daniel.

<!--
.rahmenUmBilder {
  b:hover { ... }
-->

Eine kleine Erklärung wäre hilfreich.

a.rahmenumbilder:hover { /* Style-Angaben */ }

Gruß, Ashura

[Daniel Belzer]

a.rahmenumbilder:hover { /* Style-Angaben */ }

Und als letztes dann noch: Was bekommt dann das Bildchen für eine Klasse verpasst ? Wenn es so ausgedrückt wird, dann kann es nicht sein (zumindest das weiß ich ;))

<img class="rahmenumbilder" src="Bild1.jpg">

Vielen Dank
D. Belzer

[Ashura]

Hallo Daniel.

Und als letztes dann noch: Was bekommt dann das Bildchen für eine Klasse verpasst ?

Sofern sich das <img /> Element in einem <a></a> Element befindet, gilt die Klasse auch für das verlinkte Bild.

Wenn es so ausgedrückt wird, dann kann es nicht sein (zumindest das weiß ich ;))

Ich verstehe diesen Satz nicht.

Gruß, Ashura

[Daniel Belzer]

Oh, sorry,

ich habe deinen Beitrag zu spät gesehen, David.

Nochmal vielen Dank für eure Hilfe.

Gruß
D.Belzer

[Auge]

Hallo

a.rahmenumbilder:hover { /* Style-Angaben */ }

Und als letztes dann noch: Was bekommt dann das Bildchen für eine Klasse verpasst ? Wenn es so ausgedrückt wird, dann kann es nicht sein (zumindest das weiß ich ;))

<img class="rahmenumbilder" src="Bild1.jpg">

Hier müsste eigentlich dem Link die Klasse zugewiesen werden. Wenn a.rahmenumbilder:hover, dann <a class="rahmenumbilder" href="..."><img ...></a>.

Wenn es der MSIE könnte, könnte man auch ohne Klasse auskommen. a img:hover { border:...; }. Jedes Bild, welches innerhalb eines Links angezeigt wird, oder technokratischer ausgedrückt: jedes <img>, welches Kindelement eines <a> ist, wird beim Überfahren mit dem Mauszeiger mit einem border versehen.
Aber, wie gesagt, der MSIE kann das nicht. Dem kann man hover zwar anbieten, er setzt es aber nur bei Links um.

Tschö, Auge

[David Tibbe]

Hallo Daniel,

Wie soll ich einer eigenen Klasse einen eigenen Hover-Effekt zuweisen?

a.rahmenUmBilder:hover {}, siehe auch http://de.selfhtml.org/css/formate/zentrale.htm#klassen

Grüße
  David

[Detlef G.]

Hallo D. Belzer

Wie kann ich es anstellen, dass dieser Effekt nur auf die Vorschaubilder (Thumbnails) angewandt wird ?

Du hast bereits Antworten erhalten, wie du dies mit einer extra Klasse für die
Vorschaubilder erreichen kannst.
Wenn deine Vorschaubilder nicht wild auf der Seite verteilt sind, sondern
sich in einem Block befinden, kannst du auch Nachfahrenselektoren anwenden.

Beispiel:

<div id="Vorschaubilder">
  <a href="Bild_1..."><img src="Bild_1_klein..." ...></a>
  <a href="Bild_2..."><img src="Bild_2_klein..." ...></a>
  ...
</div>

CSS:
#Vorschaubilder a:hover {border:1px;...}

Damit wirkt der Style nur für <a>-Elemente, die sich in einem Element mit der
id Vorschaubilder befinden.

Auf Wiederlesen
Detlef