Я пытаюсь работать с SVG с событиями мыши и у меня есть вопрос.
Я использую событие наведения мыши, чтобы изменить цвет фона при наведении курсора на различные части SVG. Эта часть работает в ручке, которую я сделал здесь: https://codepen.io/brianne/pen/VGagdW?editors=1010.
Однако, если я наведу курсор на букву С или маленький синий кружок внутри синего полукруга, цвет фона исчезнет, а затем снова вернется. Я бы хотел, чтобы он оставался цветом бирюзового фона всякий раз, когда меня наводили на любой объектов в этой группе.
Может кто-нибудь указать мне правильное направление, как я мог бы настроить это? Мой код указан ниже, а также в ссылке на кодовый блок.
Заранее спасибо!
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();
});
});
});