Hover-Effekt bei verlinktem Bild

[Ogre]

Aloah,

Ich bin gerade dabei ein paar Icons zu entwerfen. Diese sollen alle einzeln verlinkt werden. Wenn die Maus über so ein Icon fährt, möchte ich, dass sich ein Rahmen um das Bild legt...

Ich dachte das wäre ohne weiteres mit dem a:hover { border: ...} Befehl zu verwirklichen, aber noch will es nicht so ganz. Seht selbst:

http://home.arcor.de/spellsource/css/icons/icons.html

Was mache ich falsch?
Danke,
Ogre

 

[Eaden]

Da alle deine Bilder aber die gleiche Größe haben würde ich das so machen:


.icon {
margin-left:50px;
margin-top:10px;
width:80px;
height:110px;
}
.icon a:hover {
border:1px dashed black;
}

und dann der quellcode auf deiner seite für jedes Bild

<div class="icon">
<a href="..."><img src="..."></a>
</div>

 

[Ogre]

a) Wie ordne ich sie dann alle richtig Räumlich an?
b) Löst das mein Problem?

 

[Eaden]

a) Wenn du ein Div nach dem anderen aufrufst werden die alle Untereinander angezeigt. Du kannst das mit dem Margin dann auch weglassen. Wenn du alle an einer bestimmten Stelle haben willst musst du doch für jedes eine eigene Klasse machen.
Und dann einfach:
.icon1, .icon2,... a:hover {
border:1px dashed black;
}

b)Probier es aus. Ich gebe keine Garantie! Ich bin auch kein Profi.

 

[radamazone]

Hallo Ogre,

hier mal ein Lösungsvorschlag, beispielhaft für icon1:

#icon1 {
margin-left:50px;
margin-top:50px;
}

#icon1 a:hover {
border:1px dashed black;
display:block;
width:80px;
}

CU radamazone

 

[radamazone]

Hatte ich noch vergessen.

In Deinem Quelltext lösche bitte die <br> raus also so:

<div id="icon1"><a href="#.html"><img src="symb01.jpg" border=0></a></div>
<div id="icon2"><a href="#.html"><img src="symb02.jpg" border=0></a></div>
<div id="icon3"><a href="#.html"><img src="symb03.jpg" border=0></a></div>
<div id="icon4"><a href="#.html"><img src="symb04.jpg" border=0></a></div>

Jetzt aber müßte es klappen ohne 'Gewackel'.

Cu radamazone