Geek asks and answers

Selected Hover no background

I have a div with an unordered list.

If I click on an item, I add the selected class.

so that the selected item is always like

   <li class="selected">

For all li elements that I use.

   li:hover
{
    background-color:#CECEC8;
}

It works.

and for individual elements I use

.selected
{
    background-color:#8B8BFF;   
}
.selected :hover
{
    background-color:#8B8BFF;
}

But when I click on the selected item and the mouse is still on it (therefore, it hangs above it), the dosnt color changes, but still # CECEC8 from li: hover instead of # 8B8BFF from.selected: hover.

How can I override li: hover when pressed so that the background color of the list item with the selected class is always # 8B8BFF even when hovering.

The problem is that it does not immediately display, if you clicked, the dosnt color has changed from normal hovering.

Example

http://jsfiddle.net/FCGtc/1/

+5
source share
4

EDIT: , : Fiddle

, :

:hover, . , . li:hover , .selected:hover - li.

:

li:hover
{
    background-color:#CECEC8;
}

li.selected
{
    background-color:#8B8BFF;   
}

li.selected:hover
{
    background-color:#8B8BFF;
}

DEMO: http://jsfiddle.net/FCGtc/8/

:

, hover , ( :hover).

, important:

#browsecat li.selectedcat
{
    background-color:#8B8BFF;   
}

DEMO: http://jsfiddle.net/FCGtc/9/

+1

, , ID tan class. , ID class, , .

" ", css .

, , .

0

:

#browsecat li:hover
{
    background-color:#CECEC8;
}
#browsecat li.selectedcat
{
    background-color:#8B8BFF;   
}

!important.

http://jsfiddle.net/8vYqM/

PS: CSS: http://www.w3.org/TR/CSS2/cascade.html#specificity

0

: : hover

li.selected:hover {
  background-color:#8B8BFF;
}
0

More articles:


All Articles