React.js show part of component on freeze issue

Question

I have a problem displaying an overlay on top of my component. Below is the code.

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

This is a style method:

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

And these are mouse event handlers:

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

Ok, so when I hover over part of the content, the overlay becomes visible, but it flickers. When I stop moving the mouse over the content, the overlay displays beautifully. When I move the mouse again, it flickers again, it is barely noticeable, very annoying.

When I try to make the overlay visible in the console (only your regular document.getElementsByClassName ('overlay') [0] .style.display = 'block', it works fine and does not flicker. This problem is related to my not-so-good knowledge of React.

Any ideas why this is happening?

Ps, CSS: selector1 + selector2 {display: block; }, , .

EDIT, ( ), , , .

Answer 1

, mouseenter mouseleave div .content, .main div

, :

, , , . , , , ,

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