jquery - 拉斐尔设置事件

Question

我有一份包含多组的 Raphael 论文。每组都有一个矩形，矩形上方的路径和两个文本，其中一个是不可见的，另一个在矩形内。当鼠标悬停在整个矩形（包括文本）上时，我想更改光标。如果我对 text 和 rect 使用不同的事件处理程序并将两者中的光标更改为相同的值，它会显示文本鼠标移出的闪烁。这种闪烁使鼠标悬停不那么流畅。

当鼠标悬停在整个集合上时，我想将光标变为手形。光标中的一次更改并且在再次越过矩形边界之前不会闪烁。

如果您有任何解决方案，请帮助我 Kavita

Answer 1

假设您希望悬停影响整个集合，包括您的矩形、矩形上方的路径和两个文本......

var container = $(id to your Raphael container);
var yourSet = paper.set();  //assuming you have pushed all four elements into your set....
yourSet.mouseover(function(){
        container.css('cursor','pointer');
}
yourSet.mouseout(function(){
        container.css('cursor','default');
}

希望对你有所帮助......

Answer 2

为了避免将鼠标从文本移动到周围的框时出现闪烁，我建议使用处理 mouseover 事件的覆盖元素。

当您已经拥有包含所有元素的集合时，您可以使用来自集合中的 getBBox 的信息轻松创建一个新的覆盖元素。

这是一个小片段，这是如何工作的。

<script type="text/javascript">
        function drawPreview(){
            var preview = Raphael("preview", 200, 100);
            var box1 = preview.rect(20,20,160,40);
            box1.attr({'fill':'#ccc','stroke-opacity' : 0, 'opacity':0.5});
            var box2 = preview.rect(50,10,30,80);
            box2.attr({'fill':'#999','stroke-opacity' : 0, 'opacity':0.5});
            var line = preview.text(100, 30, "My Text");

            var mySet = preview.set();
            mySet.push(box1,box2,line);

            var bb = mySet.getBBox();
            var overlay = preview.rect(bb.x,bb.y,bb.width,bb.height);
            overlay.attr({'fill':'#fff','stroke-opacity' : 0, 'opacity':0});
            overlay.mouseover(function(){
                this.attr({'cursor':'pointer'});
            });
            overlay.mouseout(function(){
                this.attr({'cursor':'default'});
            });
        }
</script>