CODEWITHSUNDEEP
htmlcsshover
vishalkin
vishalkin

Reputation: 1235

Stop miss behavior of ul-li on hover

I hav a nav menu which has a white text and blue background and on hover its blue text with black background where as on selected its white text with black background.
But if I hover on selected menu item it shows me blue text (properties of :hover) which I don't want to happen. Any way I can stop it?

Fiddle : link

Upvotes: 0

Views: 79

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

Just add the .selected:hover case as well

main_menu li .selected,
main_menu li .selected:hover{

Demo at http://jsfiddle.net/WTeYW/3/

Additionally, since your .selected and :hover rules are identical except for the color you should merge them and create new rules just for the differences (better maintainability)

.main_menu li a:hover,
.main_menu li a.selected{
    box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
    border-color:#888; 
    background:#000; 
}

.main_menu li a:hover{color:#6cf;}
.main_menu li a.selected,
.main_menu li a.selected:hover{color:#ffffff;}

Demo including this at http://jsfiddle.net/WTeYW/5/

(notice : if you read the original answer it was a bit wrong. the a.selected is not more specific, it is equally specific but prevailed because it was the last in the CSS file. The above correction is the way to do it.)

Upvotes: 3

Ishan Jain
Ishan Jain

Reputation: 8171

You can use css :not() selector for this : 

.main_menu li a:hover:not(.selected){
    box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
    border-color:#888; 
    background:#000; 
    color:#6cf;
    }

Try This

Refrence 1

Upvotes: 0

TheUnpragmaticProgrammer
TheUnpragmaticProgrammer

Reputation: 43

I used CSS :not(.selected) to prevent :hover being executed.

.main_menu li a:not(.selected):hover{

Here: http://jsfiddle.net/CfeCB/

This is what you mean right?

Upvotes: 0

Related Questions