悬停鼠标事件错误 React

Question

我想问一下为什么我的实现不工作以及如何实现？

我只是想在悬停一个元素（图像- "the I spell"）时弹出一个 window（包含简短描述）

问题：我的按钮部分工作

我必须点击图片然后出现。
如果我移动光标没有触发消失，我必须再次点击文本本身然后消失。

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;
}
.hidden{
  display: none;
}

Answer 1

没有错误。仅在 Google Chrome 开发工具中 onMouseLeave 和 onMouseEnter 鼠标事件不起作用。你必须点击那里。

但这里有一点点优雅和现代的代码。

import React, {useState} from 'react'
import './PopUp_Example.css';
import info_button from '../../assets/Card/info-button.svg';

const PopUp_Example = props => {
    const [toogleState, setToogleState] = useState({
        toogles: [
           { number1: false}           
        ]
    });   

const toogleHandler_in = () =>{
    setToogleState ({
        toogles: [
            { number1: true},           
     ] 
    }); 
};

const toogleHandler_out = () =>{
    setToogleState ({
        toogles: [
            { number1: false},           
     ] 
    }); 
};

var changing_css_class;
if (toogleState.toogles[0].number1) {
  changing_css_class = "appear";
} else {
  changing_css_class = "hidden";
}   

     return (
         <div className="popup_container">                                        
                <div className={changing_css_class}>
                    <p >Pop Up text</p>        
                 </div>             

        <div className="something">
                <div className="info" onMouseLeave={toogleHandler_out} onMouseEnter={toogleHandler_in} >                            
                     <img src={info_button} alt='I button image'/>
                 </div> 
                    <div>Something on the page</div>  
                </div>
         </div>
    )
}
 export default PopUp_Example;

悬停鼠标事件错误 React

onhover mousevent bug React

css

hover

jsx

reactjs