Using the hover plugin on multiple elements matching the same selector. Setting any leave prevents the next element from ever being hovered until you mouseover another element. e.g., If you start on an even, only the evens will hover.
var Foo = can.Control({
".item hoverinit": function(el,ev,hover){
hover.leave(300);
},
".item hoverenter": function(el) {
el.addClass("active");
},
".item hoverleave": function(el) {
el.removeClass("active");
}
});
new Foo(".test-foo");
<div class="test-foo">
<ol>
<li class="item">1
<li class="item">2
<li class="item">3
<li class="item">4
</ol>
</div>
Demo: http://jsfiddle.net/AXwHG/