Javascript SVG上的.mouseover（）事件的行为异常

链接到JSFIDLE:

基本上，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');
    });
});

改为使用

.mouseenter（）

和

.mouseleave（）

小提琴：

---

在不访问API文档的情况下，我怀疑当鼠标移动到（而不仅仅是进入）该区域时，.mouseover会被触发。但我可能是在编造。我知道进退都是工作。

我根据格雷格·佩蒂特的建议更新了小提琴。原版：最好提及更新；当你打开它的时候，它会让人困惑，而且工作正常。是的，hover是mouseenter和mouseleave组合的别名。用你喜欢的！很高兴提供帮助。mouseover事件冒泡，与mouseenter事件相反。这可能会导致类似这样的问题，尤其是在元素方面。