为什么这个元素认为它被悬停了？

Question

我正在制作一个Web应用程序，并且正在尝试使用PHP和JavaScript。我有一个页面，用户可以将其个人资料图片更改为他们想要的任何内容，并可以对其进行裁剪，旋转和填充。无论如何，我有一个非常丑陋的文件上传输入标签，当用户将鼠标悬停在上面时，会出现一个小的摄像头。但是，由于某些原因，元素在悬停之前会触发:hover属性。这是我的代码：

.user-photo {
    height: 100px;
    width: 100px;
    margin: 35px 10px 25px 25px;
    background-size: 90px 90px;
    background-position: 5px 10px;
    background-repeat: no-repeat
}
.image-input-label {
    font-family: inherit;
    display: inline-block;
    width: 100%;
    height: 100%;
}

label.image-input-label:hover .photo-cover {
    opacity: 1;
}

.image-input-label:hover {
    cursor: pointer;
}

.photo-cover {
    position: relative;
    bottom: 100px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    top: -105%;
    filter: invert(100%);
    padding: 27.5px 20px;
}
img {
    object-fit: cover;
}

<div class="user-photo">
     <label class="image-input-label" title="Change Profile Photo" for="image-input">
          <img class="user-cover-photo" src="https://live.staticflickr.com/65535/49001978636_7a06d2db8b.jpg" width="100" height="100">
          <img src="https://live.staticflickr.com/65535/49002177512_edacf2cfd1.jpg" width="60" height="45" class="photo-cover">                
     </label>
</div>

现在，您会注意到，当您将鼠标悬停在照片上时，会出现照相机。但是，当您将鼠标悬停在它下面时，它也会出现。为什么？？这是一个例子：

如果仔细观察，您会发现鼠标位于元素下方。那为什么相机出现呢？元素不落在这里！这是Chrome DevTools的屏幕截图：[！[截图] [2]] [2]

请帮我解决这个问题！这太烦人了，我无法终生弄清楚自己在做什么错。（我为这些可怕的图片表示歉意，我正在Chromebook上这样做）

Answer 1

因为您正在使用position:relative和top:-100%，它们会将元素移至顶部，但会保留其原始空间，因此悬停区域也将考虑该空间。

为了说明您的问题，这里是一个简化的示例：

.box {
   width:100px;
   border:5px solid yellow;
   display:inline-block;
    height:100px;
}

.box:hover {
   border:5px solid red;
}

<label class="box">
  <img src="https://picsum.photos/id/100/100/100" >
  <img src="https://picsum.photos/id/20/100/100" >
</label>
<label class="box">
  <img src="https://picsum.photos/id/100/100/100" >
  <img style="position:relative;top:-100px;" src="https://picsum.photos/id/20/100/100" >
</label>

您需要考虑使用position:absolute

.user-photo {
  height: 100px;
  width: 100px;
  margin: 35px 10px 25px 25px;
  background-size: 90px 90px;
  background-position: 5px 10px;
  background-repeat: no-repeat
}

.image-input-label {
  font-family: inherit;
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
}

label.image-input-label:hover .photo-cover {
  opacity: 1;
}

.image-input-label:hover {
  cursor: pointer;
}

.photo-cover {
  position: absolute;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  top: 0;
  right: 0;
  left: 0;
  filter: invert(100%);
  padding: 27.5px 20px;
}

img {
  object-fit: cover;
}

<div class="user-photo">
  <label class="image-input-label" title="Change Profile Photo" for="image-input">
          <img class="user-cover-photo" src="https://live.staticflickr.com/65535/49001978636_7a06d2db8b.jpg" width="100" height="100">
          <img src="https://live.staticflickr.com/65535/49002177512_edacf2cfd1.jpg" width="60" height="45" class="photo-cover">                
     </label>
</div>

Answer 2

代码段似乎运行良好，所以我在方括号中进行了尝试，似乎将attribute调整为top: -140%会将摄像机图像移到鱼图像上。

Answer 3

您需要明确指定标签的大小：

label {
  width: 100px;
  height: 100px;
}