Событие .mouseover () в SVG ведет себя странно

Question

Ссылка на jsfiddle: http://jsfiddle.net/crismanNoble/gqFdH/2/

Обычно svg постоянно меняет цвета, даже не вызывая событие .mouseout.

$(function() {
    $(".icon")
    .mouseover(function() {
               var colors = ["#6F216C", "#F34B0D", "#C50102", "#5DA537", "#F1D81B"];
               var pick = Math.floor(Math.random()*5);
               var color = colors[pick];
               $(this).children().css('fill',color); 
               })
    .mouseout(function() {
              $(this).children().css('fill','black');
    });
});

Answer 1

Используйте .mouseenter() и .mouseleave() вместо.

скрипка: http://jsfiddle.net/gqFdH/5/

Не посещая документы API, я подозреваю, что .mouseover срабатывает каждый раз, когда мышь перемещается (не только в) в область. Но я мог бы придумать это. Я знаю, что входи и уходи с работы.