亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在鼠標懸停時顯示文本而不是圖標 - 反應材料 ui 按鈕

在鼠標懸停時顯示文本而不是圖標 - 反應材料 ui 按鈕

冉冉說 2022-01-07 10:49:15
我在我的項目中使用材質 ui 按鈕。最初添加按鈕只有+ 圖標。當鼠標懸停時,我需要將按鈕的內容從圖標更改為文本“創建項目”代碼如下。import Fab from '@material-ui/core/Fab';import AddIcon from '@material-ui/icons/Add';import { makeStyles } from '@material-ui/core/styles';const useStyles = makeStyles(theme => ({  iconHover: {    '&:hover': {      border: '2px solid green',      //TODO display the text CREATE ITEM instead of AddIcon    }  },  floatBtn: {    marginRight: theme.spacing(1),  },}));const Index = () => {  const classes = useStyles();  return(  <div className={classes.floatBtn}>    <Fab size="small" color="secondary" aria-label="add" className={classes.iconHover}>          <AddIcon />        </Fab>  </div>)};關于如何實現這一目標的任何想法?
查看完整描述

1 回答

?
SMILET

TA貢獻1796條經驗 獲得超4個贊

你可以使用onMouseOver和onMouseOut:


const Index = () => {

  const [hover,sethover]=useState(false);

  const classes = useStyles();

  return(

  <div className={classes.floatBtn}>

    <Fab onMouseOver={()=>sethover(true)} 

     onMouseOut={()=>sethover(false)} 

     size="small" color="secondary" aria-label="add" 

     className={classes.iconHover}>

          {hover?:("some text"):(<AddIcon />)

        </Fab>

  </div>

)};


查看完整回答
反對 回復 2022-01-07
  • 1 回答
  • 0 關注
  • 198 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號