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

如果鼠标位于raphael路径而非内部，则仅悬停触发

1 个答案: