Question

我试图创建一个圆圈，当您将鼠标悬停在圆圈上时，较小的圆圈将进入视图并可被点击。找到的示例here - 悬停在大脑，心脏或手上。

我尝试了两种不同的方法来重新创建这个动画，但两者都不起作用：

上的悬停功能

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

Answer 1

你非常接近。在原始示例中，悬停在一个区域而不是圆圈上工作，因此这在逻辑上是更好的选择。可能会有2个问题。

当您将鼠标悬停在矩形上方时，如果您将鼠标悬停在圆圈上，则会窃取该事件，导致其退出。这可以通过

circle { pointer-events: none }

rect需要填充，所以你只需要添加..

rect.attr({ fill: 'white' })

jsbin

使用Raphael JS弹出可点击的图形

1 个答案: