Currently using ReactJS, I have implemented a custom upload image button on my webpage.
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
cursor: pointer;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}<div className='upload-btn-wrapper'>
<a onClick={this.changePageImage}>Change Image</a>
<input type='file' name='page_photo' onChange={this.photoChangeHandler} />
</div>I am puzzled as to why the pointer cursor is not appearing when hovering over the wrapper. It seems there is only a small area in the bottom left corner of the 'a' tag where it shows up.
Attempting to fix this issue, I tried:
.upload-btn-wrapper a:hover {
position: relative;
overflow: hidden;
display: inline-block;
cursor: pointer;
}