Question

I am not sure if this is possible. If not I could add an data-state or class, right?

Ok so my first question is… How can I add an active state on hover of <li> and remove it from previously hovered tag if new one is selected. I assume I need to use siblings for that but how do I make it go to :active I have no clues. If it’s not possible any option from above seems fine… I just wanna learn how.

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

so as mentioned im not sure if it is possible to add active state to <li> but still I need to ask.

If not something like this is more then welcome.

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

or

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

Answer 1

You have to use classes:

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

The :active pseudo class is only for links (as pointed out by Juan Mendes)