Onhover mousevent bug React

I’ d like to ask Why not work my implementation and how possible to do it?

I simple want when hover an element( an image- “the I spell”) then pop up a window(contain a short description)

Problem: My Button work partially

  • I must click the image and then appear.
  • If I move the cursor not trigger the vanish, I must click again the text itself and then vanish.

https://stackoverflow.com/questions/60507732/onhover-mousevent-bug-react

import React from "react";
import "./PopUp_Example.css";
import info_button from "../../assets/Card/info-button.svg";

class PopUp_Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true
    };
    this.toggleHover_open = this.toggleHover_open.bind(this);
    this.toggleHover_close = this.toggleHover_close.bind(this);
  }
  toggleHover_open() {
    this.setState({ open: true });
  }
  toggleHover_close() {
    this.setState({ open: false });
  }
  render() {
    let changing_css_class;
    if (this.state.open) {
      changing_css_class = "appear";
    } else {
      changing_css_class = "vanish";
    }
    return (
      <div className="popup_container">
        <div className={changing_css_class}>
          <p>Pop Up text</p>
        </div>

        <div className="something">
          <div
            className="info"
            onMouseLeave={this.toggleHover_close}
            onMouseEnter={this.toggleHover_open}
          >
            <img src={info_button} alt="I button image" />
          </div>
          <div>Something on the page</div>
        </div>
      </div>
    );
  }
}
export default PopUp_Example;
.popup_container{
  position: relative;
  top:20px;
  display: flex;
  flex-direction: column;
  border: 3px solid red;
  width:100%;
}
.something{
  display: flex;
}
.info{
  width: 2rem;;
}
.appear{
  width:100%;
  border:3px solid green;
}
.vanish{
  display: none;
}

Try changing it to:

{ this.state.open &&
<div className="popup_container">
        <div className="appear">
          <p>Pop Up text</p>
        </div>
}