2009-05-14 34 views
2

Ich habe eine CSS-Klasse wie folgt erstellt:: Hover CSS funktioniert nicht?

div.ycontent div.ppclisting { background-color:#cccccc; } 
div.ycontent div.ppclisting:hover { background-color:#FFE5DF; } 

ich den oben Stil in einer meiner Seite angelegt haben, die ganz gut in Firefox, IE 7.0+ und in anderen aktuellen Browser funktioniert. Aber wenn ich den gleichen Stil auf einer anderen Seite anwende, dann funktioniert es nicht.

Kann mir jemand sagen, was könnte der Grund sein? Warum funktioniert es nicht auf einer anderen Seite?

Antwort

17

Ich bekam die Antwort, warum der: Hover auf einer anderen Seite nicht funktionierte. Eigentlich auf dem zweiten Seite wurde der DOCTYPE-Tag nicht, wie unten in der HTML-Seite hinzugefügt,

<!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"> 

Früher war es einfach <html> Tag und aufgrund der: schwebt auf dem div nicht funktioniert. Nach dem Hinzufügen von Doctype-Tag, wie oben gezeigt, funktioniert es für mich.

Vielen Dank an alle für Ihre Hilfe.

+1

Sie haben nicht erwähnt, dass Sie verwenden: Hover auf a ** div **. Das hätte helfen können ... Allerdings habe ich noch nie gehört, dass der Doctype Einfluss auf diesen hat. – Boldewyn

+3

Das löste auch das Problem für uns. Kann jemand erklären, warum das das Problem behebt? – Lightbeard

+0

Dies wird in der W3Schools Tutorial im folgenden Link http://www.w3schools.com/cssref/sel_hover.asp – Usha

0

Vielleicht hat das verschachtelte div auf der anderen Seite nicht die Klasse ycontent und/oder das Element selbst ist keine Klasse ppclising?

+0

Sie schrieb nur, was ich gerade tippte;) –

2

Wenn es an einem Ort, aber nicht an einem anderen Ort funktioniert, wird es entweder nicht korrekt aufgerufen oder es wird nicht korrekt angewendet.

Verwenden Sie Firebug, und sehen Sie, welche Eigenschaften das Element haben die Stile wirklich haben. Dann überprüfen Sie die Klassennamen auf Tippfehler. Normalerweise löst das das Problem wie beschrieben.

+0

Ich habe bereits Eigenschaften mit WEB Developer Toolbar (Firefox Erweiterung) überprüft, und für die erste Seite zeigen beide .ycontent und .ycontent: Hover-Eigenschaften, aber für andere Seite zeigt es nur .ycontent-Klasse nicht die .ycontent: Hover-Klasse? – Prashant

2

Auch in IE6 funktioniert :hover nur mit a Elementen. Merk dir das.

+0

Ich weiß das, deshalb habe ich IE7 + in meiner Frage erwähnt. – Prashant

1

Ich bin in Übereinstimmung mit Brandon.

Ich will hinzufügen, auch ..

Wenn Sie das entfernen: von Ihrer Linie

div.ycontent 

Abschnitt, so dass es wie folgt aussieht:

.ppclisting { 
background-color:#cccccc; 
} 

.ppclisting:hover { 
background-color:#FFE5DF; 
} 

Sie es finden werden arbeite auf deiner anderen Seite.

Warum? Weil Sie diese Stile als "Klassen" definiert haben. Klassen beabsichtigen, den gleichen Stil mehrmals anzuwenden.

Indem Sie den "div.ycontent" davor setzen, beschränken Sie das Pull-Potenzial von CSS-Klassen im Wesentlichen nicht.

+1

ja das war der fall sollte er jetzt haben, die andere seite hatte kein div.ycontent element V-UP – Dels

+0

Alle Seiten haben das div mit Klasse .ycontent – Prashant

3

hatte gerade ein ähnliches Problem. Achte darauf, dass du richtig stapelst! Das ist der Z-Index.

0

Ich hatte gerade Position: absolut auf einen Elternteil brechen meine: Hover's, obwohl es kein Problem als Großeltern scheint. Ich bin neu in all dem, also weiß ich nicht, ob das normal ist oder nicht.

Amendment: Dies stellte sich als ein Z-Index-Problem für mich heraus. Ich musste -1 auf den Eltern, 0 auf Geschwister mit der angegebenen Position und 1 auf die Divs, für die ich Hover-Aktivität wollte.