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

Question

我在拉斐尔有三个路径。我使用 set 将它们组合在一起。我想在悬停时用不同的颜色填充所有三个路径。但是，仅当鼠标箭头位于路径线上方时才适用触发器，并且如果我将鼠标悬停在路径内则不会触发。这是一个小提琴JS 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;
}