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

我正在制作一个web应用程序，我正在尝试使用

PHP

和

JavaScript

。我有一个页面，用户可以去，改变他们的个人资料图片，以任何他们想要的，可以裁剪和旋转它和东西。不管怎么说，我有一个标签，用于可怕的文件上传输入，当用户将鼠标悬停在上面时，会出现一个小摄像头。但是，由于某种原因，元素在悬停之前会触发

：hover

属性。 这是我的密码：

。用户照片{
高度：100px；
宽度：100px；
利润率：35px 10px 25px 25px；
背景尺寸：90px 90px；
背景位置：5px10px；
背景重复：无重复
}
.图像输入标签{
字体家族：继承；
显示：内联块；
宽度：100%；
身高：100%；
}
标签。图像输入标签：悬停。照片封面{
不透明度：1；
}
.图像输入标签：悬停{
光标：指针；
}
.照片封面{
位置：相对位置；
底部：100px；
背景：rgba（255,255,255,0.5）；
不透明度：0；
前-105%；
过滤器：倒置（100%）；
填充：27.5px20px；
}
img{
对象匹配：覆盖；
}

< /代码> 因为您使用的是“代码>位置：相对<代码/代码>和代码>顶部：-100% < /代码>，它将将元素移动到顶部，但将保留其原来的空间，因此悬停区域也将考虑该空间。

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


.box{
宽度：100px；
边框：5px纯黄色；
显示：内联块；
高度：100px；
}
.box:悬停{
边框：5px纯红；
}
谢谢！我完全忘记了带有
位置的元素：relative仍按其原始位置生效。我会尽快接受你的答复。