2012-04-10 31 views
-1

Ich mache ein Tabbed Navigationsmenü über jQuery in meiner Website. Alle einzelnen Registerkarten die Klasse navBarLink und hier ist die CSS, um es im Zusammenhang:CSS-Hover funktioniert nicht

.navBarLink:link,.navBarLink:visited 
{ 
display:block; 
height:27px; 
width:120px; 
color:#FFF; 
background-color:#06C; 
text-align:center; 
padding:4px; 
text-decoration:none; 
border:0; 
margin:2px 2px 0 2px; 
} 
.navBarLink:hover,.navBarLink:active 
{ 
background-color:#FFF; 
color:#06C; 
border-bottom-style:solid; 
border-bottom-color:#FFFFFF; 
border-bottom-width:1px; 
} 

Das Problem ist, dass die Hintergrundfarbe ändert sich, wenn ich auf eine Registerkarte klicken, aber nicht ändern, wenn ich auf einer Registerkarte schweben. Grundsätzlich funktionieren mein Hover und mein Klick nicht gleichzeitig. Irgendeine Idee, warum das passiert?

+0

Öffnen Sie Ihren bevorzugten Seite Debugger (Chrome Dev/Firebug/IE-Dev-Tools), wählen Sie das Element, und sehen, wie das CSS gerendert wird. – asawyer

+0

Es scheint zu funktionieren. http://jsfiddle.net/st46b/ – mikevoermans

+2

Ist '.navBarLink' ein' a' Element? Wenn nicht, könnte das das Problem sein. Ich weiß, dass zumindest einige Versionen von IE '' hover''-Regeln nicht verwenden werden, wenn sie nicht auf ein 'a'-Element angewendet werden. –

Antwort

1

http://jsfiddle.net/UnFhQ/

Dies funktioniert. (Ich entfernte den: link aus dem ersten css code, nur damit ich die Hintergrundfarbe des divs sehen konnte ...) Aber klicke hier und lass uns wissen, was mit dem Code nicht funktioniert. Danke

+0

+1: Ich habe noch nie jsfiddle.net gesehen. Ich mag das! –

+0

haha, ya Mann, es funktioniert Wunder neben Stackoverflow ... Ich habe es immer mehr auf dieser Website gesehen, es macht die Frage "warum funktioniert dieser Code nicht" viel viel einfacher zu debuggen und zu verifizieren. –

+0

http://tinkerbin.com/ ist auch ziemlich genial. – asawyer

Verwandte Themen