码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-11-09 21:59:45      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:index   class   return   func   seo   rom   reac   turn   root   

 

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

标签:index   class   return   func   seo   rom   reac   turn   root   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!