只有当鼠标在拉斐尔路径上而不是内部时才会触发悬停

Question

我在拉斐尔有3条路。我使用 set 将它们组合在一起。我想在悬停时用不同的颜色填充所有三个路径。但是，触发器仅在鼠标箭头位于路径线上方时适用，如果我将鼠标悬停在路径内则不会触发。这里有一个fiddleJS Fiddle。

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

Answer 1

您需要将 pointer-events 设置为可见，例如你可以让论文 CSS 看起来像这样

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

只有当鼠标在拉斐尔路径上而不是内部时才会触发悬停

Hover only triggers if mouse is on raphael path and not inside

javascript

jquery

svg

hover

raphael