React.js显示了悬停问题组件的一部分

React.js show part of component on hover issue

本文关键字：组件 一部分 问题 悬停 js 显示 React      更新时间：2023-09-26

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

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

这就是风格方法：

getOverlayStyle: function() {
    return {
        display: 'none',
        position: 'absolute',
        top: '0',
        bottom: '0',
        left: '0',
        right: '0',
        zIndex: '100'
    }; 
}

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

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

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

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

你知道为什么会这样吗？

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

编辑时，我试着按照评论中的建议设置可见性通过状态（在鼠标进入和离开时更改状态），但当鼠标移动时，它仍然会闪烁。

我很确定您需要将mouseenter和mouseleave移动到.contentdiv，而不是.maindiv

我所期待的是：

如果输入main，将显示覆盖，这意味着鼠标离开main并进入覆盖。因为它离开了main，所以覆盖被隐藏，当覆盖被隐藏时，鼠标重新进入main，导致循环冲洗并重复

尽管这实际上可以通过css选择器来实现。你想在react中这样做有什么原因吗？

这个（codepen）有一个纯css解决方案

.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;
}
相关文章：