Почему этот элемент думает, что он находится в поисках?

Question

Я создаю веб-приложение и экспериментирую с использованием 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: [! [Screenshot] [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>

Или сделать элементы уровня изображения блока:

.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: -100%;
  filter: invert(100%);
  padding: 27.5px 20px;
}

img {
  object-fit: cover;
  display: block;
}

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

Или скрыть переполнение:

.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%;
  overflow:hidden;
}

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>