.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');
    });
});

Solution

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.

Comments

[Crisman]

I updated the fiddle after Greg Pettit's suggestions. Orginal: jsfiddle.net/crismanNoble/gqFdH/2

[Vlad]

It would be good to mention the update; it's confusing when you open it up, and it works alright.

[Greg Pettit]

Yes, hover is an alias for combining mouseenter and mouseleave. Use whichever you prefer! Glad to help.

[Erik Dahlström]

The mouseover event bubbles, as opposed to the mouseenter event. That can cause issues like this, especially with <g> elements.