1

我正在使用 SVG 和 Raphael JS。我有一种情况，如果您将鼠标悬停在一个元素上，第二个元素会出现在第一个元素的顶部。当第二个元素出现时，鼠标现在位于第二个元素上，因此 mouseout 事件会在第一个元素上触发并隐藏第二个元素。这继续循环。如何防止鼠标悬停在第一个元素上或防止鼠标悬停在第二个元素上？

在我尝试过的其他示例中，我得到了闪烁的效果。这是我在拉斐尔所做的简化版本...

window.onload = function () {
  var paper = Raphael("container", 1000, 900);
  var rect_one = paper.rect(30, 30, 150, 150).attr({fill:"#fff"});
  var rect_two = paper.rect(50, 50, 60, 60).attr({fill:"#fff"});

  rect_two.hide();

  rect_one.mouseover(function () {
    rect_two.show();
  });

  rect_one.mouseout(function () {
    rect_two.hide();
  });

};
4

2 回答 2

0

我重新考虑了您的解决方案，并提出了以下方法...

而不是试图触发 onmouseout 事件（这是由鼠标越过包含状态名称的文本框触发的，因此当您将鼠标移过状态/名称区域时会发生闪烁），我认为它可能是将当前活动状态简单地缓存在变量中更有效，并在鼠标进入时测试以查看缓存状态是否与您正在鼠标悬停的状态匹配。

请参阅随附的 jsFiddle（您自己的一个分支）以及我在该脚本中包含的注释。

http://jsfiddle.net/XKt9U/8/

于 2012-09-28T16:47:44.703 回答
0

如果将 Raphael 元素放在一组中，则可以解决问题：

window.onload = function () {
  var paper = Raphael("container", 1000, 900);
  var group = paper.set()
  var rect_one = paper.rect(30, 30, 150, 150).attr({fill:"#fff"});
  var rect_two = paper.rect(50, 50, 60, 60).attr({fill:"#fff"});
  group.push(rect_one);
  group.push(rect_two);
  rect_two.hide();

  group.mouseover(function () {
    rect_two.show();
  });

  group.mouseout(function () {
    rect_two.hide();
  });

};​

http://jsfiddle.net/agdMG/

于 2012-09-22T01:23:54.087 回答