Javascript 仅当鼠标位于raphael路径上而不在内部时，才会触发悬停

我在拉斐尔有三条路。我用set组合了它们。我想在悬停时用不同的颜色填充所有三条路径。但是，只有当鼠标箭头位于路径线上方时，触发器才会应用，而当我将鼠标移到路径内时，触发器不会触发。这是一把小提琴

JS

(function () {
    var paper = Raphael("paper", "100%", "100%");
    var cube1 = paper.set();

    // animate the set
    var anim = Raphael.animation({
        opacity: 1
    }, 500);

    // middle cube
    cube1.push(
    paper.path("M190 200 L260 160 330 200 260 240 190 200"),
    paper.path("M260 240 L330 200 330 280 260 320 260 240"),
    paper.path("M260 240 L260 320 190 280 190 200 260 240"));
    cube1.attr({
        stroke: "#ffffff",
            'stroke-width': 2,
        opacity: 0
    }).animate(anim);


    // hover for set

    function getHoverHandler(setName, fill1, fill2, fill3) {
        return function () {
            setName[0].attr({
                fill: fill1,
                cursor: "pointer"
            });
            setName[1].attr({
                fill: fill2,
                cursor: "pointer"
            });
            setName[2].attr({
                fill: fill3,
                cursor: "pointer"
            });
        };
    }
    cube1.hover(getHoverHandler(cube1, "#000000", "#1e1e1e", "#282828"), getHoverHandler(cube1, "none", "none", "none"));
    //to add a class in Raphael
})();

您需要设置为可见，例如，您可以使纸张CSS如下所示

#paper {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    pointer-events: visible;
}