.mouseover() event on SVG is acting weird

Question

Link to jsfiddle: http://jsfiddle.net/crismanNoble/gqFdH/2/

Basically the svg keeps changing colors without ever triggering the .mouseout event.

$(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

Use .mouseenter() and .mouseleave() instead.

fiddle: http://jsfiddle.net/gqFdH/5/

Without visiting the API docs, I suspect that .mouseover is triggered any time the mouse moves over (not just into) the area. But I could be making that up. I know that enter and leave work.