我正在尝试创建一个圆形，当您将鼠标悬停在该圆形上时，较小的圆形将变为可见并且可单击。找到的示例here-将鼠标悬停在大脑，心脏或手上。
我尝试了两种不同的方法来重新创建此动画，但两种方法都无法正常工作：
在主圆圈codepen上的悬停功能
paper.circle(300,200,50)
.attr ({
fill : "orange",
stroke: "none"
}).hover (function() {
c1.animate({cx: 450}, 1000, "bounce");
c2.animate({cx: 150}, 1000, "bounce");
c3.animate({cy: 50}, 1000, "bounce");
c4.animate({cy: 350}, 1000, "bounce");
}, function () {
c1.animate({cx: 300}, 500);
c2.animate({cx: 300}, 500);
c3.animate({cy: 200}, 500);
c4.animate({cy: 200}, 500);
});
这意味着当您将鼠标移离主圆时，较小的圆会消失，这意味着我无法使较小的圆成为可单击的事件，因为您无法将鼠标移到它们上而不会消失。
接下来，我尝试将鼠标悬停在围绕该区域的矩形上，但是我得到的结果确实很奇怪，并且悬停功能根本不起作用。请参见codepen。
paper.rect(0,0,600,400).hover (function() {
c1.animate({cx: 450}, 1000, "bounce");
c2.animate({cx: 150}, 1000, "bounce");
c3.animate({cy: 50}, 1000, "bounce");
c4.animate({cy: 350}, 1000, "bounce");
}, function () {
c1.animate({cx: 300}, 500);
c2.animate({cx: 300}, 500);
c3.animate({cy: 200}, 500);
c4.animate({cy: 200}, 500);
});
最佳答案
你很亲密在原始示例中，将鼠标悬停在某个区域而不是圆圈上，因此从逻辑上讲，这将是更好的选择。不过可能会有2个问题。
当您将鼠标悬停在矩形上时，如果您将鼠标悬停在一个圆圈上，它将窃取该事件，并使其退出。
这可以通过以下方式解决：circle { pointer-events: none }
rect将需要填充，因此您只需要添加即可。rect.attr({ fill: 'white' })
jsbin
关于javascript - 用Raphael JS弹出可点击的图形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25918643/