向标记添加活动状态<li>

Question

我不确定这是否可能。如果没有，我可以添加一个数据状态或类，对吧？

好的，所以我的第一个问题是...如何在悬停<li>时添加活动状态，并在选择新标签时将其从先前悬停的标签中删除。我想我需要为此使用兄弟姐妹，但我如何让它进入：活动，我不知道。如果不可能，上面的任何选择似乎都可以......我只是想学习如何。

#menubar li {
    background: rgba(20, 20, 20, .3);
    margin: 10px 0;
    padding: 5px 0;
    width: 50%;
    cursor: pointer;
}
#menubar li:active {
    width: 100%;
}

<ul id="menubar">
    <li><a href="head.php">Head</a></li>
    <li><a href="body.php">Body</a></li>
    <li><a href="settings.php">Settings</a></li>
    <li><a href="">None</a></li>
    <li><a href="">None</a></li>
</ul> <!-- menubar CLOSE -->

所以如前所述，我不确定是否可以将活动状态添加到<li>但我仍然需要问。

如果不是这样的事情，那就更受欢迎了。

<li data-state="active"></li>

或

<li class="activeItem"></li>

Answer 1

你必须使用类：

$('li').hover(function() {
    $(this).addClass('active');
}, function() {
    $(this).removeClass('active');
});

:active伪类仅用于链接（如胡安·门德斯所指出的）

Answer 2

你只是这样做 -

$('li').hover(
    function(){
        $(this).addClass('activeState');
}, function() {
       $(this).removeClass('activeState');
});

Answer 3

鼠标悬停的另一种选择（由Sidharth Mudgal建议）是使用焦点事件，如果您按Tab 键进入链接，它将起作用

http://jsfiddle.net/QXap5/1/

$('li a').focus(function(){
  $(this).closest('li').addClass('active');
});
$('li a').blur(function(){
  $(this).closest('li').removeClass('active');
});