时间戳

首页 > 解决方案 > 图片：悬停不工作

html - 图片：悬停不工作

问题描述

好吧，我在“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>

这是我所有的代码。现在的问题是当我将光标放在图像上方时，标签仍然不可见。为什么？我该如何解决？

（PS因为如果我的代码有效，我对两个图像都使用相同的样式，那么当我将光标放在一个图像上时，两个标签都会显示，不要照顾那个）

标签： htmlcss

解决方案

您面临以下问题：

  • 在 CSS 中，+是相邻兄弟选择器。
    但是，在您的 HTML 中，label不是紧跟在.myimg.

  • 您正在使用覆盖 CSS 的内联样式。

解决方案：

  • 重新组织你的元素，
  • 没有更多的内联样式，CSS 保留在 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>

希望能帮助到你。

推荐阅读