Question

我正在与SVG和Raphael JS合作。我有一种情况，如果你将鼠标悬停在元素上，第二个元素出现在第一个元素的顶部。当第二个元素出现时，鼠标现在位于第二个元素上，因此mouseout事件将触发第一个元素并隐藏第二个元素。这继续循环。如何防止在第一个元素上发生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();
  });

};

Answer 1

如果您将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/

Answer 2

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

而不是尝试触发onmouseout事件（由鼠标移动到包含状态名称的文本框触发，因此当你在状态/名称区域移动鼠标时发生闪烁），我想简单地将当前活动状态缓存在变量中可能更有效，并且在鼠标输入时，测试以查看缓存状态是否与您将鼠标移入的状态匹配。

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

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

防止悬停在覆盖悬停元素的元素上

2 个答案: