Keep hover state active across divs
<p>I want to know how you keep the hover state of div element active accross multiple div elements.
So if i hover over Menu-item 1 then go to Menu-item 6 Menu item 1 is active while menu item 6 is active then I'd goto menu item 9 and thats active so my previous Menu Items are active.</p>

<p>CSS:</p>

<pre><code>.menuitem-active {
     background-color: #ff9900;
}
.menuitem {
     background-color: #ffffff;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="menu"&gt;
        &lt;div class="menu-item"&gt;Menu Item 1&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 2&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 3&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
    &lt;div class="menu"&gt;
        &lt;div class="menu-item"&gt;Menu Item 5&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 6&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 7&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 8&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
    &lt;div class="menu"&gt;
        &lt;div class="menu-item"&gt;Menu Item 9&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 10&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 11&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 12&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>$('.container .menu .menu-item').mouseenter(function(){

});
</code></pre>
