Javascript React.js在悬停问题上显示部分组件

我在组件上显示覆盖层时遇到问题。下面是代码

<div className="content">
    <div className="main" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseLeaves}>
    ...
    </div>
    <div className="overlay" style={this.getOverlayStyle()} ref="overlay">
    </div>
</div>

这些是鼠标事件处理程序：

mouseOver: function() {
    this.refs.overlay.style.display = 'block';
},
mouseLeaves: function() {
    this.refs.overlay.style.display = 'none';
},

好的，当我将鼠标悬停在内容部分上时，覆盖层变得可见，但它在闪烁。当我停止在内容上方移动鼠标时，覆盖显示得很好。当我再次移动鼠标时，它再次闪烁，几乎看不见，非常烦人

当我尝试使覆盖在控制台中可见时（仅限于您的常规文档.getElementsByClassName（'overlay'）[0]。style.display='block'，它工作正常且不会闪烁。我猜这个问题是由于我还不太了解

你知道为什么会这样吗

另外，我尝试使用纯CSS解决方案：selector1+selector2{display:block；}，其行为与上面相同

---

编辑时，我尝试通过状态设置可见性（在鼠标进入和离开时更改状态），遵循注释中的建议，但当鼠标移动时，它仍会闪烁。

我非常确定您需要将

鼠标指针

和

鼠标删除

移动到

.content

div，而不是

.main

div

我所期望的是：

输入main后，将显示覆盖层，这意味着鼠标离开main并进入覆盖层。由于鼠标离开main，因此覆盖层将隐藏，当覆盖层隐藏时，鼠标将重新进入main，从而导致循环冲洗和重复

---

虽然这确实可以通过css选择器来实现。您想在react中这样做有什么原因吗？

有一个纯css解决方案可以解决这个问题（）

---

不确定这是否是问题所在，但如果您使用React设置样式，则不应通过访问DOM来更改样式。这与我使用常规外部CSS设置样式时相同。覆盖是否显示在内容顶部？（即鼠标将进入覆盖？）@Kitfong这个想法在我脑海中闪过，但我想改变状态“只是为了悬停可见性”是否有点过火，但是的，那可能是最好的。我现在就去做。“它绝对定位，最重要的是内容”因为覆盖层不是主元素的子元素，所以此时会触发

mouseleave

。鼠标离开主元素。这会隐藏覆盖层。在这种情况下，鼠标进入主元素，主元素显示覆盖层。覆盖层应该是您绑定处理程序的元素的子元素。是的，就是这样。这样的clumsy错误。我知道我可以用纯CSS来做，但我用React来做是为了更好地了解它。

mouseOver: function() {
    this.refs.overlay.style.display = 'block';
},
mouseLeaves: function() {
    this.refs.overlay.style.display = 'none';
},

.content {
  position: relative;
}
.main {
  background-color: #0d0;
  min-height: 30px;
  min-width: 30px;
}
.overlay {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  zIndex: 100;
  background-color: #d00;
}
.content:hover .overlay {
  display: block;
}