我有一组只包含一个矩形。
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({
...
});
然而，这似乎是正在应用的悬停功能，每个项目组中的独立，而不是整个集，因为当你去到鼠标放在链接，悬停关闭功能火灾和链接消失。 有时box获得悬停在悬停和关闭快速连续和spazzes事件。
是否有一个悬停应用于一组的东西，所以，在设定的两件事情之间移动鼠标不会触发徘徊过的方法吗？
已经面临这种限制自己最近，我决定写一个小扩展名为拉斐尔hoverInBounds能解决它。
简单地说，一旦鼠标进入我们跟踪的，而实际上它的移动范围之外的元素 - 执行悬停输出功能的话，而不是之前。
演示： 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;
}
您创建拉斐尔纸对象之前将上面的代码块。
我之前打了这个问题。 我发现2个解决方案。
创建在具有不透明性的其他元素设置为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 );
这仅适用于具有1个像click整体动作元素。
另一种选择是取消悬停功能悬停在一组元素时
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
});
基本上，第一次进入一组首次元素时在功能上悬停时，才会执行，当最后你徘徊到元素不是该组的一部分悬停输出功能将只执行一次。
我发现，这适用于以下
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为圣拉斐尔形状像“矩形”，等等。
我测试了它在鼠标悬停和mouseout事件和它的作品。
这里检查我的小提琴： 链接捣鼓
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);
});
}
