我有一个只包含一个矩形的集合。
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({
...
});
但是,悬停功能似乎单独应用于集合中的每个项目,而不是整个集合,因为当您将鼠标悬停在链接上时,悬停关闭功能会触发并且链接会消失。有时,该框会快速连续发生悬停事件和悬停事件并产生混乱。
有没有办法将悬停应用于一组事物,以便在该组中的两个事物之间移动鼠标不会触发悬停关闭?
最近我自己也遇到了这个限制,我决定为 Raphael 编写一个小扩展,名为hoverInBounds
这样就解决了。
简单地说,一旦鼠标进入元素,我们就会跟踪它何时实际移出其边界 - 然后执行悬停功能,而不是之前。
Demo: http://jsfiddle.net/amusill/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 纸对象之前放置上面的代码块。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)