React练习 5 ：鼠标移入移出改变样式

 

需求：鼠标移入/移出div范围时，样式发生改变

import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function ChangeStyle(){
    const [isHover,setHover]=useState(false);

    return(
        <div 
        id="div1" 
        className={isHover ? 'hover' : ''}
        onMouseOver={()=>setHover(true)}
        onMouseOut={()=>setHover(false)}
        >鼠标移入改变样式，鼠标移出恢复。</div>
    )
}

ReactDOM.render(
    <ChangeStyle/>,
    document.getElementById('root')
)