我有一个只包含一个矩形的集合。
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({
...
});
但是,悬停功能似乎是单独应用于集合中的每个项目,而不是整个集合,因为当您将鼠标悬停在链接上时,悬停关闭功能会触发并且链接会消失。有时,框会快速连续地悬停和悬停事件和 spazzes。
有没有一种方法可以将悬停应用于一组事物,以便在集合中的两个事物之间进行鼠标悬停不会触发悬停关闭?
最佳答案
最近我自己遇到了这个限制,我决定为 Raphael 编写一个名为 hoverInBounds
的小扩展来解决它。
简单地说,一旦鼠标进入元素,我们就会跟踪它实际移出边界的时间 - 然后执行 hover out 函数,而不是之前。
演示: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;
}
在创建 Raphael 纸对象之前放置上面的代码块。
关于javascript - 将鼠标悬停在 Raphaeljs 中的一组元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14224071/