React.js show part of component on hover issue

Question

I have a problem with showing an overlay over 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 the style method:

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

And these are the mouse event handlers:

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

Okay, so, when I hover over the content part, the overlay becomes visible, but it's flickering. When I stop moving the mouse above the content, the overlay is displaying nicely. When I move the mouse again, it flickers again, it's barely watchable, very annoying.

When I try making the overlay visible in the console (just your regular document.getElementsByClassName('overlay')[0].style.display = 'block', it works normally and doesn't flicker. I'm guessing this problem is due to my not yet great React knowledge.

Any ideas why is this happening?

Ps, I tried using a pure CSS solution: selector1 + selector2 { display: block; } and it behaved the same as above.

EDIT, I tried setting the visibility through state (change state on mouse enter and mouse leave), following a recommendation in the comments, but it still flickers when the mouse is moving.

Answer 1

I'm pretty sure you need to move the mouseenter and mouseleave to the .content div, not the .main div

what I expect is happening is this:

you enter main, the overlay is displayed which means the mouse leaves main and enters overlay. because it left main, the overlay is then hidden, and when the overlay is hidden, the mouse reenters main causing the cycle to rinse and repeat

although really this can be accomplished with css selectors. is there a reason you want to do this in react?

Answer 2

There is a pure css solution to this (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;
}