| 

.NET C# Java Javascript Exception

3
Ich zeige auf einer Seite ein Band mit Bildern an und möchte, dass das Bild, das der Mauszeiger berührt, jeweils mit einem Rahmen hervorgehoben wird. Kann ich das über eine CSS-Anweisung realisieren?
14.12.2011
michelleradu 21 1
2 Antworten
1
Moin,

sollte gehen wenn du ein Link drum machst.

Html
<a href="#" class="link"><img src="myimg.jpg " /></a>


Css
.link { border 0px; }
.link:hover {border: 1px solid red; }


Gruß

ps: ungetestet :)

Update
Beispiel: JsFiddle

Update 2
Der Vollständigkeit halber noch ein Beispiel welches das css:hover direkt auf das Bild legt. Funktioniert aber nicht in jedem Browser: JsFiddle
14.12.2011
Nicolai Schönberg 2,3k 1 8
1
Das Beispiel von Nicolai bezieht sich auf den Hover-Effekt den das LINK-Element zur Verfügung stellt. Wenn du aber meinst, das der User auf ein Bild klicken soll kannst du dann entweder mit JavaScript oder mit CSS-Transition lösen (funktioniert aber nur in moderneren Browsern, also nicht in alten IE-Versionen).

Ein Beispiel:

<div id="minigalerie">
<a href="#b1"><img src="Bild1.png" id="b1" width="100" height="50" /></a>
<a href="#b2"><img src="Bild2.png" id="b2" width="100" height="50" /></a>
<a href="#b3"><img src="Bild3.png" id="b3" width="100" height="50" /></a>
</div>

<style>
#minigalerie img {
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
border:solid 0px red;
}

#minigalerie img:target {
border:solid 1px blue;
}
</style>

Demo: jsFiddle.net/8DvDX/

Ein interessanter Nebeneffekt ist, das du nun direkt auf ein Bild, welches hervorgehoben sein soll, verweisen kannst. Beispiel: http://fiddle.jshell.net/8DvDX/show/#b2. Und das alles ohne JavaScript.

Nachtrag:


Das ganze funktioniert auch mit nem Hover-Effekt (inkl. der kleinen Animation ;)):

#minigalerie a img {
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
border:solid 0px red;
border-spacing:1px;
}

#minigalerie a:hover img {
border:solid 1px blue;
}
14.12.2011
Floyd 11,0k 3 9
Floyd 11,0k 3 9
Auch nicht schlecht :)
Nicolai Schönberg 14.12.2011

Stelle deine Web-Frage jetzt!