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

I have three paths in raphael. I have combined them using set. I want to fill all the three paths with different colors on hover. However the trigger applies only if mouse arrow is above the path line and doesn't trigger if I mouseover inside the path. Here is a fiddle JS Fiddle.

我在拉斐尔有三条路。我用set组合了它们。我想在悬停时用不同的颜色填充所有三条路径。但是,仅当鼠标箭头位于路径线上方时触发器才适用,如果我将鼠标悬停在路径内,则触发器不会触发。这是一个小提琴JS小提琴。

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

1 个解决方案

#1

You need to set pointer-events to visible e.g. you could make the paper CSS look like this

您需要将指针事件设置为可见,例如你可以让纸质CSS看起来像这样

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