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

Posted 2020-11-30 sx00xs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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‘)
)

以上是关于React练习 5 ：鼠标移入移出改变样式的主要内容，如果未能解决你的问题，请参考以下文章

[读码时间] 图片列表：鼠标移入/移出改变图片透明度