1

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

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

#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>
4

3 回答 3

4

你必须使用类：

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

:active伪类仅用于链接（如 Juan Mendes 所指出的）

于 2012-11-27T19:51:19.130 回答
1

你只要这样做——

$('li').hover(
    function(){
        $(this).addClass('activeState');
}, function() {
       $(this).removeClass('activeState');
});
于 2012-11-27T19:53:36.397 回答
1

mouseover 的替代方法（由 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');
});
于 2012-11-27T19:59:15.210 回答