我使用for循环创建了4个rects。如果您将鼠标悬停在其中任何一个上,则会在旁边显示一个矩形。但问题是新显示的rect不会在鼠标上隐藏。我的代码出了什么问题?
window.onload = function() {
var paper = Raphael(0, 0, 640, 540);
function aa(h1,h2){
var showbox = paper.rect(h1+300,h2,100,100);
}
function ab(){
showbox.hide();
}
for (i = 0; i < 2; i++) {
for (j = 0; j < 2; j++) {
(function(i, j) {
var boxes = paper.rect(0 + (j * 100), 0 + (i * 100), 100, 100).attr({
fill: '#303030',
stroke: 'white'
});
boxes.node.onmouseover = function() {
var h1 = boxes.getBBox().x;
var h2 = boxes.getBBox().y;
aa(h1,h2);
};
boxes.node.onmouseout = function() {
ab();
};
})(i, j);
}
}
答案 0 :(得分:4)
你有javascript范围问题(加上另外两个小问题,见下文)。
变量showbox
在函数aa
中定义。所以你的onmouseout功能无法看到它。获取Firebug或浏览器的等效内容,您将看到一堆showbox is not defined
错误。
提示:在使用Raphael时,我通常创建一个包含所有已创建对象的对象或数组,键入以便于访问,并在我所有与Raphael相关的功能上进行范围设置,以便所有这些功能都可以访问它(见下面的jsfiddle示例)。
如何访问您的Raphael对象是一个应用程序设计,您需要尽早决定,否则您需要进行大量的重构(在那里,它会受到伤害) !)。
以下是适用于您的代码的改编版本:
编辑:我添加了解释每项更改的评论。
它还解决了其他两个问题:
attr
和display: none;
,请尝试.attr({opacity:0})
或.hide()
...... mouseover / mouseout事件本身实际上很好! : - )