Question

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

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

但是，如果将鼠标悬停在字母C或蓝色半圆内的蓝色小圆圈上，背景颜色会逐渐消失，然后又逐渐变回。我希望在将鼠标悬停在任何字母上时都保持蓝绿色背景颜色该组中的对象。

有人能指出我正确的方向吗？我的代码在下面以及在代码笔链接中。

谢谢！

HTML

Array(data[:recordset][:row]) # using the first example data
# => [[:property, [{:name=>"Code", :value=>"C0001"}, {:name=>"Customer", :value=>"ROSSI MARIO"}]]]

CSS

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

JS

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

}）;

Answer 1

设置指针事件：无论您不想对鼠标做出任何反应，都不要设置。

$(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();
    });
});

});

.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;
    }
}

circle, .cls-8 {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

SVG和js鼠标事件

1 个答案: