CSS zu ändern Hintergrund der aktiven Nav Menü Seite

Ich habe diese Website von http://camerabeanbags.co.uk/test und auf der oberen Nav-Menü können Sie sehen, wenn Sie den Mauszeiger über den Text auf dem Menü einen grauen Hintergrund hinter dem Text zeigt.CSS zu ändern Hintergrund der aktiven Nav Menü Seite

Welchen CSS-Code kann ich verwenden, um den grauen Hintergrund hinter der aktiven Seite anzuzeigen? Also, wenn ich auf der Startseite bin, dann erscheint ein grauer Hintergrund hinter der Homepage Text auf dem Menü?

Danke,

Harvey

Quelle

2017-07-17 Harvey

Keine Notwendigkeit hinzuzufügen Hintergrund oder etwas zu Ihrem Code.

li.current-menu-item a, 
nav a:active, 
nav a:focus { 
    color: #406639 !important; 
} 
li.current-menu-item a:before, 
nav a:active:before, 
nav a:focus:before { 
    transform: scaleX(1); 
}

Dies würde den Standardstil für den Hover-Status auslösen.

EDIT: Ich habe aktualisiert Antwort mit voller Sache, die Sie brauchen. :) Beachten Sie, dass musste ich hinzufügen wichtig, wie Sie auf diesem Wähler wichtig haben:

a:focus { 
color: #c9c9c9 !important; 
text-decoration: none; 
}

Quelle

2017-07-17 13:19:40

Hallo dieser Code funktioniert perfekt, wie würde ich in der Lage sein, den Text auf der aktiven Menüseite zu setzen, wie gut, wie es grün zu sein schwebt es? – Harvey

Hey Harvey können Sie 'li.current-menu-item a hinzufügen {color: # 406639;}' das sollte den Trick machen –

Ja, das ist perfekt danke, irgendwelche Ideen, wie es eingestellt werden kann, wenn ein Menüelement angeklickt wird es geht zu den Farben, wenn es aktiv ist. Der graue Hintergrund mit grünem Text? Und dann wird es perfekt :) – Harvey

Sie verwenden:

li.current-menu-item:hover > a { 
    background: #e8e8e8; 
}

Quelle

2017-07-17 13:16:33

Wie ich Sie verwendet sehen kann :: vor als Hintergrund-Effekt, der auf schweben ist ... Um es in einem aktiven Zustand zu machen Sie verwenden können:

nav li.active a:before { 
content: ''; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
z-index: -1; 
background: #e8e8e8; 
transform: scaleX(0); 
transition: transform .25s;}

auch mit aktiver Klasse hinzufügen müssen li,

Quelle

2017-07-17 13:30:16

CSS zu ändern Hintergrund der aktiven Nav Menü Seite

Antwort

Verwandte Themen