javascript - combine hover and focus selectors styles but not simultaniously - Stack Overflow

admin管理员组

文章数量:1253367

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();

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();

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 6, 2015 at 15:58 talemyn 7,96044 gold badges3232 silver badges5252 bronze badges asked Feb 6, 2015 at 15:51 user2014429user2014429 2,5771010 gold badges3838 silver badges5252 bronze badges 3

• Since you have tagged JavaScript and jQuery, I assume you are not looking for a pure CSS solution. Is that a valid assumption? – Harry Commented Feb 6, 2015 at 16:00
• Remove li:focus within the CSS? – James George Dunn Commented Feb 6, 2015 at 16:01
• @Harry does not have to be pure css, but if possible, then that would be good. – user2014429 Commented Feb 6, 2015 at 16:02

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 11

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

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

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

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

With Jquery you can use blur() event:

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

$('li').hover(function() {
  $(this).siblings('li').blur();
})

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

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>hover over one and two and three should not be yellow anymore</p>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

You could use only the focus style and add a mouseover event on list items to make them focus when hovering. That way, even if you take the mouse out of the list item, it will remain focused.

$('li').mouseover(function() {
  $(this).focus();
});

本文标签： javascriptcombine hover and focus selectors styles but not simultaniouslyStack Overflow