I recently found myself needing to design a vertical menu that makes uses of the CSS :hover selector.
In this particular case I also wanted the last item that was in a hover state to stay in that state. In other words: if I was half way down the menu with my mouse then moved it away, I wanted that item to stay changed until the mouse was returned to perhaps another item in the menu.
Edit: I’m aware that this could be done quite easily with jQuery but I wanted to have a go at doing it without using the library.
<div id="locations_menu"> <ul> <li class="first" id="bb"><a href="#" onmouseover="trig('bb')">MENU ITEM 1</a></li> <li id="trc"><a href="#" onmouseover="trig('trc')">MENU ITEM 2</a></li> <li id="mb"><a href="#" onmouseover="trig('mb')">MENU ITEM 3</a></li> <li id="ch"><a href="#" onmouseover="trig('ch')">MENU ITEM 4</a></li> </ul> </div>
The end result with a bit of styling
The live version