combine hover and focus selectors styles but not simultaniously

Question

I have a ul with list items that are highlighted when they are hovered over or focused upon. However if there is one being hovered and another being focused, then I only want the hovered li to change style and the focused elements style to go back to default. Is this possible? Here is a demo. Thank you.

css

li:hover,li:focus{
    background-color:yellow;
    cursor:pointer; 
}

html

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li> 
</ul>

js

$('li').attr('tabindex','0').focus();

Answer 1

Using the code you have, do this ...

li:focus{
    background-color:yellow;
    cursor:pointer;
    outline: none;
}

ul:hover > li:focus {
    background: none;
    cursor: default;
}

ul:hover > li:hover {
    background: yellow;
    cursor: pointer;
}

What's the CSS saying?

• Set any list item that has :focus to have yellow background.
• When you hover over the parent UL, set all the li's to have no background.
• When you hover over an individual LI, set the background to yellow.
• When you hover out of the UL, the styling resets.

JS Fiddle

Answer 2

Place your :hover CSS class before :focus...

.textbox:hover
{
    border-color: lightskyblue;
}

.textbox:focus
{
    border-color: yellowgreen;
}