搜尋

首頁  >  問答  >  主體

反應自訂按鈕懸停樣式不起作用

我的 React 專案中有一個按鈕,我是這樣設定的。

<label style={styles.label}>
    <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} />
</label>

樣式設定是這樣的

label : {
    borderRadius: '1vh',
    cursor: 'pointer',
    height: '2.5vh',
    margin: '0.5vh',
    minWidth: '50px',
    fontSize: '1.7vh',
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'row',
    backgroundColor : 'green',
    color           : 'black',
    opacity         : '0.9',
    '&:hover': {
        backgroundColor : 'green',
        color           : 'black',
        opacity         : '1',
    },
},
input : {
    zIndex   : -1,
    position : 'absolute',
    opacity  : 0,
    visibility : 'hidden',
}

當滑鼠懸停在標籤上時,懸停樣式不會激活,我不確定我在這裡做錯了什麼。

P粉434996845P粉434996845445 天前534

全部回覆(1)我來回復

  • P粉797004644

    P粉7970046442023-09-12 13:11:59

    您無法使用內聯CSS添加懸停(如何我在內聯 CSS 中寫入“a:hover”?)。為此使用外部 CSS。 React文件中提到如何新增外部樣式表

    回覆
    0
  • 取消回覆