SVG 和 js 鼠标事件

我正在尝试使用带有鼠标事件的 SVG 并有一个问题。

当鼠标悬停在 SVG 的不同部分时，我正在使用鼠标悬停事件来更改背景颜色。这部分在我在这里制作的笔中工作：https : //codepen.io/brianne/pen/VGAgdW?editors=1010。

但是，如果我将鼠标悬停在字母 C 或蓝色半圆内的小蓝色圆圈上，背景颜色会淡出然后淡入。当我将鼠标悬停在任何对象上时，我希望它保持青色背景颜色在那个组内。

任何人都可以指出我如何调整这个正确的方向吗？我的代码在下面以及 codepen 链接中。

提前致谢！

HTML

<div id="flowerbg" class=""></div>
<div class="container">
    <div class="framework-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 720">
            <g class="cls-1">
                <g id="" data-name="Layer 1">
                    <!-- Layer 5 / dark blue layer-->
                    <g class="layer layer5">
                        <a class="slice slice10" data-num="10">
                          <!--blue half circle-->
                            <path class="cls-2" d="M360,45C186,45,45,186,45,360l28.63-28.63a4,4,0,0,1,5.74,0L108,360H612l28.63,28.63a4,4,0,0,0,5.74,0L675,360C675,186,534,45,360,45Z" />
                            <!--small blue circle-->
                            <circle cx="250" cy="100" r="20" />
                            <!-- letter c -->
                               <path class="cls-8" d="M305.63,78.71l-1.28,1.34a5.33,5.33,0,0,0-4.86-1.31A5.79,5.79,0,0,0,302,90.06a5.26,5.26,0,0,0,3.87-3.19l1.71.75a7,7,0,0,1-5.21,4.17A7.56,7.56,0,1,1,299.11,77,6.9,6.9,0,0,1,305.63,78.71Z" />
                        </a>
                    </g>
                </g>
            </g>
        </svg>
    </div>
</div>

CSS

.bg10 {
    opacity:1 !important;
    background-color:teal;  
}
#flowerbg {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    transition: all .4s;
    opacity:1;
}

.container {
    position:relative;
    z-index:10;
    width:100vw;
    height:99vh;
    opacity:1;
}

.framework-wrapper {
    max-width:1000px;
    margin:0 auto;
    margin-top:0px;
    padding-top:60px;
}

//letters
.cls-8 {
    fill: white;
}

// all layers
.layer {
    cursor:pointer;
}

//all slices
.slice {
      path {
            transition: all .5s;
      }
}

.cls-2 {
    fill: navy;
}

.slice10 {
    circle {
        fill:blue;
    }
}

JS

$(document).ready(function(){

//detect when mouse stops moving function
var timeout;
$(document).on('mousemove', function (event) {
    if (timeout !== undefined) {
        window.clearTimeout(timeout);
    }
    timeout = window.setTimeout(function () {
        $(event.target).trigger('mousemoveend');
    }, 100);
});

var lastBg = '';

$('.slice').mousemove(function(e){
    //once the mouse stops moving
    $('.slice').on('mousemoveend', function () {

        // get slide number
        var num = $(this).data('num');

        //first mousemovement set flower bg 
        if (lastBg == "") {
            lastBg = num;
            var flower = 'bg' + num;
            $("#flowerbg").fadeIn("slow", function() {
                $(this).addClass(flower);
            });

        }
        //if the last background that was hovered is the same as the current one 
        else if (lastBg == num) {
             var flower = 'bg' + num;
            $("#flowerbg").fadeIn("slow", function() {
                $(this).addClass(flower);
            });
        }
        //if it's not the first mouse movement and the last bg doesn't equal the currently hovered one 
        else {

            lastBg = num;
            var flower = 'bg' + num;
            $("#flowerbg").fadeIn("slow", function() {
                $(this).addClass(flower);
            });

        }

    });
}); 

$(".framework-wrapper").mouseout(function(evt) {
    $("#flowerbg").fadeOut("fast", function() {
        $("#flowerbg").removeClass();
    });
});

});