Javascript 防止悬停在覆盖悬停图元的图元上

我正在使用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();
  });

};

---

如果将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();
  });

};​

---

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

与其试图触发onmouseout事件，该事件是由鼠标在包含状态名称的文本框上移动触发的，因此当鼠标在状态/名称区域上移动时会出现闪烁，我认为只需将当前活动状态缓存在变量中，然后在鼠标输入时，可能会更有效，测试以查看缓存状态是否与鼠标悬停的状态匹配

请参阅您自己的分支附带的JSFIDLE，以及我在该脚本中包含的注释

---

嗨，谢谢你的回复。上面这个简单的例子有效。对于我正在编写的代码，我似乎无法得到相同的结果。我遇到的问题是，当你悬停在一条被另一条路径覆盖的路径上时，它会闪烁。请参阅JSFIDLE上的示例：对于我来说，调试代码太多了。如果您想要快速修复，您可以添加指针事件：无虽然这在某种意义上对旧版本的IE不起作用，但在您的原始代码中发生的是，onmouseout事件被触发，因为您的鼠标与另一个对象（状态名称框）相交，它被视为状态外对象。