GWT MouseOverHandler和MouseOutHandler可怕的结果，元素保持鼠标在上方并同时鼠标移出事件？

我对GWT MouseHandler事件有问题：

这是代码：

@Override
    protected void extend(ServerConnector target) {
        final Widget widget = ((ComponentConnector) target).getWidget();

        widget.addDomHandler(new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent e) {
                widget.setVisible(false);
            }
        }, MouseOverEvent.getType());

        widget.addDomHandler(new MouseOutHandler() {

            @Override
            public void onMouseOut(MouseOutEvent event) {
                widget.setVisible(true);
            }
        }, MouseOutEvent.getType());
    }

我用的是Vaadin，这是在一个扩展连接器内。悬停的元素是一个简单的标签。当我只使用MouseOverHandler或MouseOutHandler时，一切都很好，但当我同时使用它们时，我得到了一个可怕的结果（请看一下视频，了解我的意思）：

---

为什么MouseOverHandler和MouseOutHandler在一起时会这样做？

这与gwt无关。当鼠标在小部件上时，您正在隐藏它。当元素隐藏时，鼠标不再位于其上方，因此会触发mouseOut事件，从而使小部件再次可见。这将再次触发鼠标悬停事件，循环再次开始

基本上是这样的：

<div onMouseOver="this.style='visibility:hidden;'" onMouseOut="this.style=''">blub</div>

blub

---

或者在jsfiddle上玩：

是的，我明白你的意思。但我甚至尝试过使用

小部件.addStyleName（）

添加一个CSS类，该类的可见性为

隐藏，并在鼠标悬停时将其删除，其美妙之处在于我仍然会经历这种“循环”，为什么？当您将可见性设置为隐藏时，元素隐藏，之前在该元素上的鼠标不再在该元素上。这意味着鼠标离开了元素，因此必须触发onMouseOut事件。直接或通过CSS类设置可见性：隐藏并不重要。你想干什么？如果你想在鼠标悬停的时候隐藏一些东西，你应该将事件附加到周围的div上。看看这个：在firefox以外的其他浏览器中也可以使用（至少是chrome，还没有测试IE）。你发布的最后一个提琴就是我想做的！谢谢无论如何，在这种情况下，
visibility:hidden
与
display:none
具有相同的含义，我认为当您将
visibility
设置为hidden时，元素只会隐藏，但它会继续占据页面中所需的空间（与
display:none
不同，元素不再占用空间），因此如果它继续占用它所需的空间，鼠标会继续在它上面，但在这种情况下不是这样，对吗？我也不确定。但我测试了它（linux上的firefox和chromium），鼠标事件不会在隐藏的元素上触发。