Question

我在组件上显示叠加层时遇到问题。以下是代码。

<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（＆＃39; overlay＆＃39;）[0] .style.display =＆＃39; block＆＃39;，它可以正常工作并且没有闪烁。我猜这个问题是由于我还没有很好的反应知识。

任何想法为什么会发生这种情况？

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

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

Answer 1

我确定您需要将mouseenter和mouseleave移至.content div，而不是.main div

我期待的是这样：

进入main后，显示叠加层，表示鼠标离开主页并进入叠加层。因为它离开了主要部分，然后隐藏了叠加层，当隐藏叠加层时，鼠标重新进入主要部分，导致循环冲洗并重复

尽管这可以用css选择器完成。你有什么理由想做这件事吗？

Answer 2

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

.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;
}

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

2 个答案: