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伪类只适用于链接（如Juan Mendes所指出的）

Answer 2

你这样做 -

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

Answer 3

鼠标悬停的替代方法（由Sidharth Mudgal建议）是使用焦点事件，如果您选择链接

，它将起作用

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

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

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

将活动状态添加到<li>标记</li>

3 个答案: