I have a button in my React project, I set it up like this.
<label style={styles.label}> <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} /> </label>
The style setting is like this
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', }
The hover style doesn't activate when the mouse is over the label, I'm not sure what I'm doing wrong here.
P粉7970046442023-09-12 13:11:59
You cannot add hover using inline CSS (How do I write "a:hover" in inline CSS?). Use external CSS for this. The React documentation mentions how to add an external stylesheet