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')
)