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

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('overlay')[0] .style.display ='block',它正常工作并且不会闪烁.我猜这个问题是由于我还没有很好的反应知识.

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

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

编辑,我尝试通过状态设置可见性(在鼠标输入和鼠标离开时改变状态),遵循评论中的建议,但是当鼠标移动时它仍然闪烁.

Answer 1

我敢肯定,你需要移动mouseenter,并mouseleave给.contentDIV,而不是.mainDIV

我期望发生的是这样的:

进入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;
}