В чем проблема в использовании setInterval в обработчике события mouseenter?

Есть див <div id="foo"></div>, на который вешаем обработчики событий mouseenter и mouseover. Необходимо, чтобы цикл вызова фунции action начинался при наведении курсора на див и, соответсвенно, прекращался при удалении курсора с дива.

var foo = $('#foo');
var cycle;
function action(){
    foo.append('• ');
}

foo.mouseenter(function(){
    cycle = setInterval(action, 250);
});
foo.mouseover(function(){
    clearInterval(cycle);
});

Проблема в том, что если не укзывать обработчик для mouseover, то цикл будет работать, разумеется, без остановки и ускоряясь с каждым последующим наведением курсора.
Тот же результат получается если писать обработчики для обоих событий, но в первом setInterval(action, 250) не присваивать переменной cycle.
Фидл