Question

我正在为此使用ReactJS。我的页面上有一个自定义的上传图片按钮

.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>

我的问题是，当我将鼠标悬停在包装上时，为什么指针光标没有显示出来？我注意到标签的左下角有一个小巧的甜蜜点，但它只是一个小巧的斑点。

我什至尝试过

.upload-btn-wrapper a:hover {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}

Answer 1

upload-btn-wrapper input[type=file]设置为position: absolute;，因此包含整个upload-btn-wrapper块。换句话说，锚点位于绝对定位的输入后面，因此您无法将鼠标悬停在其上方。

您可以将z-index添加到锚标记以将其向上移动，或使用负数z-index将输入向后移动。

指针光标未显示

1 个答案: