Javascript 悬停在Raphaeljs中的一组元素上

我有一个只包含一个矩形的集合

var hoverTrigger = this.paper.set();
var outline = this.paper.rect();
outline.attr({
...
hoverTrigger.push(outline)
this.sprite.push(hoverTrigger);

悬停时，矩形应展开，并向其中添加一些链接，当鼠标关闭时，链接消失，矩形再次变小

hoverTrigger.hover(function () {
  var link = this.paper.text();
  hoverTrigger.push(link);
  outline.animate({
  ...
}, function() {
  link.remove();
  outline.animate({
  ...
});

但是，似乎对集合中的每个项目单独应用了hover函数，而不是整个集合，因为当您将鼠标移到链接上时，hover off函数将启动，链接将消失。有时，框会快速连续地打开和关闭悬停事件，并发出一阵骚动

---

有没有一种方法可以将鼠标悬停在一组对象上，这样在集合中的两个对象之间进行鼠标悬停时不会触发鼠标悬停？

我以前遇到过这个问题。我找到了两个解决方案

在其他元素上创建一个矩形，不透明度设置为0

var paper = new Raphael( 0, 0, 100, 100 );
var rect = paper.rect( 0, 0, 100, 100 ).attr({ opacity: 0 });
rect.hover( func_in, func_out );

这仅适用于具有一个整体动作（如单击）的图元

另一个选项是在将鼠标悬停在一组元素上时取消悬停功能

var funcOutTimer;

set.hover( function( ) {
    if( funcOutTimer ) { // Hovered into this element in less than 100 milliseconds => cancel
        window.clearTimeout( funcOutTimer);
    } else {
    // do stuff
    }
},
function( ) {
    funcOutTimer = setTimeout( function( ) {
        // do stuff
    }, 100 ); // wait for 100 milliseconds before executing hover out function
});

---

基本上，只有在第一次输入一组元素时，才会执行“悬停入”功能，而当您最后悬停入的元素不是该元素集的一部分时，才会执行“悬停出”功能一次。

我最近也遇到了这一限制，我决定为Raphael编写一个名为

hoverInBounds

的小扩展来解决这个问题

简单地说，一旦鼠标进入元素，我们将跟踪它何时实际移动到其边界之外——然后执行hover out函数，而不是之前

演示：

---

在创建Raphael paper对象之前，请放置上面的代码块。

我发现这适用于以下情况

myCircleElement.hover (
    function(e) { myTextElement.animate({opacity:1}, 800); },
    function(e) {
        var x = e.layerX || e.x,
        y = e.layerY || e.y;
        // Return `false` if we're still inside the element's bounds                                        
        if (this.isPointInside(x, y)) return false;
        // otherwise do something here.. eg below
        myTextElement.animate({opacity:0}, 800); //
    }
);

---

布鲁诺方法细节有一个小问题：

如果在其他元素上创建矩形，如果其他元素是文本，则无法在网页中选择这些文本。但它是有效的

顺便说一句，属性“不透明”：0是不够的，我必须添加“填充”：“白色”属性

您需要将对象带到前面，如下所示：obj.toFront（）；obj是一种拉斐尔形状，如“rect”等

我在mouseover和mouseout事件中测试了它，它工作正常

在这里查看我的小提琴：

---

这在Mac上的Firefox上似乎不起作用（两个圆圈的行为相同）@ario-Oops，谢谢突出显示。Firefox和其他浏览器使用

clientX

和

clientY

来确定鼠标坐标。我已经更新了代码以反映所有浏览器。注意：在纸张0,0不是屏幕0,0的容器中使用时，可以使用

var$elem=$（此[0]）。最近（'div'），ePos=$elem.offset（）；x-=ePos.left+parseInt（$elem.css（'paddingLeft'））+parseInt（$elem.css（'borderLeftWidth'））；y-=ePos.top+parseInt（$elem.css（'paddingTop'））+parseInt（$elem.css（'borderTopWidth'））以进行补偿。（假设您的容器是div…）
myCircleElement.hover (
    function(e) { myTextElement.animate({opacity:1}, 800); },
    function(e) {
        var x = e.layerX || e.x,
        y = e.layerY || e.y;
        // Return `false` if we're still inside the element's bounds                                        
        if (this.isPointInside(x, y)) return false;
        // otherwise do something here.. eg below
        myTextElement.animate({opacity:0}, 800); //
    }
);

function withArray(x,y){
    var rect = paper.rect(x, y, 100, 60).attr({
        fill: "green"
    });
    rect.text = paper.text(x+(100/2), y + 30, 'rect w/array').attr({
        'font-size': 12,
        "fill": "white"
    });
    var rectover = paper.rect(x,y,100,60).attr({
        fill: "white",
        opacity: 0
    });
    var myArray = paper.set();
    myArray.push(rect, rect.text, rectover);
    myArray.mouseover(function() {
    var anim = Raphael.animation({
    transform: ['S', 1.5, 1.5, (rect.attr("x")), (rect.attr("y"))]
        }, 100, "backOut", function() {
    });
    myArray.animate(anim);
    }).mouseout(function() {
        var anim = Raphael.animation({
            transform: [""]
        }, 50, "backOut", function() {
   });
   myArray.stop().animate(anim);
});
}