将鼠标悬停在Raphaeljs中的一组元素上 [英] Hovering over a set of elements in Raphaeljs

问题描述

  var hoverTrigger = this.paper.set（）;我们有一个只包含一个矩形的集合。 
 var outline = this.paper.rect（）; 
 outline.attr（{
 ... 
 hoverTrigger.push（大纲）
 this.sprite.push（hoverTrigger）; 
  

悬停后，矩形应该展开，并添加一些链接，并且在鼠标关闭时，链接消失，矩形再次变小。

  hoverTrigger.hover（function（）{
 var link = this.paper.text（）; 
 hoverTrigger.push（link）; 
 outline.animate（{
 ... 
}，function（）{
 link.remove（）; 
 outline .animate（{
 ... 
}）; 
  

然而，它似乎悬停功能单独应用于集合中的每个项目，而不是整个集合，因为当您将鼠标悬停在链接上时，悬停关闭功能会激活并且链接消失。有时框会悬停并悬停关闭事件的快速连续和spazzes。

是否有办法将悬停应用于一组事物，以便在该组中的两件事之间进行鼠标悬停不会触发悬停？

解决方案

最近我面临这个限制，我决定写一个拉斐尔的小扩展名为 hoverInBounds 解析它。

简单地说，一旦鼠标进入元素，我们会跟踪它何时移动到它的外部

演示： http://jsfiddle.net/amustill/Bh276/1

  Raphael.el.hoverInBounds = function（inFunc，outFunc）{
 var inBounds = false; 
 
 //鼠标悬停功能。只有在`inBounds`为false时才执行。 
 this.mouseover（function（）{
 if（！inBounds）{
 inBounds = true; 
 inFunc.call（this）; 
} 
 }）; 
 
 Mouseout函数
 this.mouseout（function（e）{
 var x = e.offsetX || e.clientX，
y = e.offsetY | | e.clientY; 
 
 //如果我们仍然在元素边界内，返回`false` 
 if（this.isPointInside（x，y））返回false; 
 
 inBounds = false; 
 outFunc.call（this）; 
}）; 
 
返回这个; 
 
  

在创建Raphael纸张对象之前放置上述代码块。 p>

I have a set that only contains a rectangle.

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

Upon hover, the rectangle is supposed to expand, and some links are added to it, and upon mouse off, the links disappear and the rectangle becomes small again.

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

However, it seems like the hover function is being applied to each item in the set individually, and not the whole set, because when you go to mouse over a link, the hover off function fires and the link disappears. Sometimes the box gets hover on and hover off events in quick succession and spazzes.

Is there a way to apply a hover to a set of things, so that mousing between two things in the set doesn't trigger hover off?

解决方案

Having faced this limitation myself recently, I decided to write a small extension to Raphael called hoverInBounds that resolves it.

Simply, once the mouse enters the element we keep track of when it actually moves outside its bounds - executing the hover out function then, not before.

Demo: http://jsfiddle.net/amustill/Bh276/1

Raphael.el.hoverInBounds = function(inFunc, outFunc) {
    var inBounds = false;

    // Mouseover function. Only execute if `inBounds` is false.
    this.mouseover(function() {
        if (!inBounds) {
            inBounds = true;
            inFunc.call(this);
        }
    });

    // Mouseout function
    this.mouseout(function(e) {
        var x = e.offsetX || e.clientX,
            y = e.offsetY || e.clientY;

        // Return `false` if we're still inside the element's bounds
        if (this.isPointInside(x, y)) return false;

        inBounds = false;
        outFunc.call(this);
    });

    return this;
}

Place the above block of code before you create your Raphael paper object.

这篇关于将鼠标悬停在Raphaeljs中的一组元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！