Question

好吧，我在＆＃34; profile.php＆＃34; 文件中加入了包含两张图片的＆＃34; head.php＆＃34; 文件和三个标签（其中两个标签内有另一个图像）。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

（PS因为如果我的代码有效，我会对两个图像使用相同的样式，那么当我将光标放在上面的一个图像上时，将显示两个标签，不要处理它）< / em>的

Answer 1

您面临以下问题：

在CSS中，<nav class="navbar navbar-expand-md bg-transparent navbar-dark fixed-top" style="position:absolute"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </div> <ul class="navbar-nav" id="login"> <li class="nav-item "> <a class="nav-link" style="font-weight:300;" href=""><i class="fas fa-user fa-sx"></i>  Login</a> </li> </ul> </nav>是相邻的兄弟选择器但是，在您的HTML中，+不是label之后的元素。
您正在使用覆盖CSS的内联样式。

解决方案：

重新组织您的元素，
没有更多内联样式，CSS保留在CSS中。

以下是代码中的简化代码段，只是为了向您展示原则：

＆＃13;

.myimg

＆＃13;

.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;
}

＆＃13;

希望它有所帮助。

图像：悬停不起作用

1 个答案: