首页 > 其他 > 详细

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

时间:2019-11-09 21:57:35      阅读:675      评论:0      收藏:0      [点我收藏+]

 

需求:鼠标移入/移出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 :鼠标移入移出改变样式

原文:https://www.cnblogs.com/sx00xs/p/11827910.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!