On hover over a li element, change class of another li element

by DannyEnglander

HTML

<ul id="menu">
    <li>Item 1</li>
    <li class="current active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

#menu > li {
    display: inline-block;
    padding: 5px 20px;
    border: 1px solid #444;
    cursor: pointer;
    margin: 4px 2px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#menu > li.active {
    color: red;
    border-color: red;
    box-shadow: 1px 1px 3px red;
}

JavaScript

$('#menu li').on('mouseover', function() {
    var li$ = $(this);
    li$.parent('ul').find('li').removeClass('active');
    li$.addClass('active');
})
.on('mouseout', function() {
    var li$ = $(this);
    li$.removeClass('active');
    li$.parent('ul').find('li.current').addClass('active');
});