Ebene vergrößern, wenn Maus drüber ist?

[Stephan Liebig]

Ist es möglich, die Größe einer Ebene zu ändern, wenn man mit der Maus drüber fährt?

 

[Maik]

Hi,

das funktioniert in den modernen Browsern folgendermaßen:

.box {
width:200px;
height:200px;
background:#ffff00;
color:#000;
}

.box:hover {
width:400px;
height:400px;
}

<div class="box">box</div>

Falls du die älteren IE-Versionen bis einschliesslich IE6 berücksichtigen möchtest, wäre hierfür zusätzlich JS erforderlich, da sie neben a:hover die allgemeingültige :hover-Pseudoklasse für die übrigen HTML-Elemente nicht unterstützen:

.box {
width:200px;
height:200px;
background:#ffff00;
color:#000;
}

.box:hover, .box_hover {
width:400px;
height:400px;
background:#ffff00;
color:#000;
}

<div class="box" onmouseover="this.className='box_hover'" onmouseout="this.className='box'">box</div>

 

[Stephan Liebig]

Aber background-images können nicht geladen werden?

.mypic {
	width:150px;
	height:182px;
	/*background:#ffff00;*/
	color:#000;
	background-image:(./images/me/ich_small.jpg);
}
.mypic:hover, .mypic_hover {
	width:370px;
	height:450px;
	/*background:#ffff00;*/
	color:#000;
	background-image:(./images/me/ich.jpg);
}

<div class="mypic" onmouseover="this.className='mypic_hover'" onmouseout="this.className='mypic'"></div>

 

[Maik]

Selbstverständlich, du musst nur background-image:url(./images/me/ich_small.jpg) schreiben

 

[Stephan Liebig]

Ich hasse es, wenn ich so kleine Fehler mache. Aber dann mache ich die zumindest nicht mehr

Also ich habe das jetzt geändert. Allerdings will sich das Bild immer noch nicht anzeigen.

.mypic {
	width:150px;
	height:182px;
	/*background:#ffff00;*/
	color:#000;
	background-image: url(./images/me/ich_small.jpg);
}
.mypic:hover, .mypic_hover {
	width:370px;
	height:450px;
	/*background:#ffff00;*/
	color:#000;
	background-image: url(./images/me/ich.jpg);
}

 

[Maik]

Dann wird's bei dir wohl am Verzeichnispfad zu den Grafiken liegen, denn bei mir funktioniert das Stylesheet einwandfrei.

 

[Stephan Liebig]

Ich weiß nicht woran es liegt, vielleicht das ich krank werde, aber klar. Ich hatte nen . vergessen

background-image: url(../images/me/ich.jpg)

Aber ich habe schon gleich die nächste Frage zu CSS ^^

Passt jetzt nicht zum Topic.

http://www.stephan-liebig.de/?news

Im Firefox wird es alles toll dargestellt, aber im IE habe ich irgendwie Probleme

 

[Maik]

Frag mich jetzt bitte nicht wieso, aber der IE7 verschluckt sich an dem kursiv-gesetzten Link. :suspekt:

In seinen Vorgängerversionen (5.01, 5.5 & 6) tritt der Darstellungsfehler hingegen überhaupt nicht in Erscheinung.

 

[Stephan Liebig]

Mhhh

Habe es jetzt über CSS gemacht

#content .inhaltDivStudium a {
font-style: italic;
}

Aber der Fehler tritt immer noch auf, sollange ich Kursiv verwende.:suspekt:

 

[Maik]

Sag ich doch