CODEWITHSUNDEEP
javascriptjquerysvghoverraphael
Thomas Sebastian
Thomas Sebastian

Reputation: 1612

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

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.

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

Upvotes: 0

Views: 317

Answers (1)

Robert Longson
Robert Longson

Reputation: 124324

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

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

Upvotes: 2

Related Questions