In the React project I'm working on, there is a button that has been configured in the following manner.
<label style={styles.label}>
<input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} />
</label>
This is how the styles have been defined:
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',
}
However, the hover effect does not seem to be working when the mouse is over the label, and I'm unsure about what might be causing this issue.