<分区>
<分区>
好吧，我在我的 “profile.php” 文件中包含一个 “head.php” 文件，其中包含两个图像和三个标签(其中两个有另一个图像里面)。
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 220px;
left: 20px;
}
.image3 {
position: absolute;
top: 340px;
left: 140px;
}
.image4 {
position: absolute;
top: 360px;
left: 1020px;
}
.nameText {
position: absolute;
top: 320px;
left: 200px;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
display: inline-block;
cursor: pointer;
width: 30px;
height: 30px;
}
.imgedit {
max-width: 100%;
max-height: 100%;
height: 75px;
width: 75px;
}
.myimg:hover+.mylabel {
display: block;
}<div class="parent">
<input id="file-upload" type="file" />
<img class="image1 myimg" src="imagesomething1.png" style="width:1050px; height:390px;">
<img class="image2 myimg" src="imagesomething2.png" style="width:150px; height:150px;">
<label style="display: none;" for="file-upload" class="custom-file-upload image3 mylabel"><img class="imgedit" src="imagesomething3.png"></label>
<label style="display: none;" for="file-upload" class="custom-file-upload image4 mylabel"><img class="imgedit" src="imagesomething4.png"></label>
<label class="nameText">...(text)...</label>
</div>这是我所有的代码。现在的问题是，当我将光标放在图像上方时，标签仍然不可见。为什么？我该如何解决？
(附言，因为如果我的代码有效，我对两张图片使用相同的样式，那么当我将光标放在一张图片上方时，两个标签都会显示，请不要管它)
最佳答案
您面临以下问题:
在CSS中，+是相邻的兄弟选择器。
但是，在您的 HTML 中，label 不是 .myimg 之后的元素。
您正在使用覆盖 CSS 的内联样式。
解决方案:
这是您代码中的一个简化片段，只是为了向您展示原理:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 220px;
left: 0;
}
.image3 {
position: absolute;
top: 0;
left: 200px;
}
.image4 {
position: absolute;
top: 220px;
left: 200px;
}
.imgedit {
max-width: 100%;
max-height: 100%;
height: 75px;
width: 75px;
}
.myimg {
width: 150px;
height: 150px;
}
.mylabel {
display: none;
}
.myimg:hover+.mylabel {
display: block;
}<div class="parent">
<img class="image1 myimg" src="https://placekitten.com/150/150">
<label for="file-upload" class="custom-file-upload image3 mylabel"><img class="imgedit" src="https://placekitten.com/75/75"></label>
<img class="image2 myimg" src="https://placekitten.com/150/150">
<label for="file-upload" class="custom-file-upload image4 mylabel"><img class="imgedit" src="https://placekitten.com/75/75"></label>
</div>希望对您有所帮助。
关于html - 图片 :hover is not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50877187/