CSS Hover über DIV

hurga_gonzales · 14. September 2010

Hi,

auch auf die Gefahr hin, mich zu blamieren, aber unterer Code geht nicht.

Code:

<style>
	.test:hover { background-color:#555; }
</style>

<div class="test">Mein Name</div>

Weder im FF, noch im IE8 (kompatibel und normal).
Spinn ich oder mache ich was falsch oder hab ich nen Hirnschlag?

Danke, Hurga

Ergänzung (14. September 2010)

Ok, gelöst, allerdings mit einem Fragezeichen an der Stirn.

Code:

<style>
	.test p:hover { background-color:#555; }
</style>

<div class="test"><p>Mein Name</p></div>

Das funktioniert. Die direkte Anwendung von Pseudoklassen auf eigene Klassen funktioniert also nur unter Angeabe einer Hauptklasse.

div.text:hover {...}

würde auch funktionieren.

Schüss
Hurga

bodybag · 14. September 2010

Das geht erst ab XHTML 1.0

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	.test:hover { background-color:#555; }
</style>
</head>
<body>
<div class="test">Mein Name</div>
</body>
</html>

scorp2710 · 14. September 2010

ich habs gerade mal getestet. im ie8 ff auch keinen erfolg gehabt. aber im chrome gehts...

S.o.T. · 14. September 2010

Natürlich geht der im Eingangspost genannte Code! Vermutlich hast du nur keinen Doctype gesetzt und somit hat der Browser den Code im Quirksmode gerendert.

HTML:

<!DOCTPYE html>

<html lang="de">
<head>
<meta charset="utf-8" />
<title>Testteil</title>
<style>
	.test:hover { background-color:#555; }
</style>
</head>
<body>
<div class="test">Mein Name</div>
</body>
</html>

Das funktioniert astrein. Wieso sollte es auch nicht? Auch die "Lösung", die du in deinem Edit genannt hast, bereitet mir Kopfzerbrechen. Pseudoklassen lassen sich auf alles anwenden, sogar auf den *-Selektor.

div:hover funktioniert also ebenso wie .test:first-child:focus:hover oder irgendetwas anderes Komplizierteres.

Suche

CSS Hover über DIV

hurga_gonzales

Captain

bodybag

Cadet 2nd Year

scorp2710

Lt. Junior Grade

S.o.T.

Ensign

Ähnliche Themen