CSS，图像上方的悬停框仅出现在一个图像上

Question

我已成功在图像上编码了悬停颜色和文本。我想为剩下的三个图像重复该操作。现在，该代码对于第一个图像成功执行，但其余所有都不执行。我究竟做错了什么？谢谢。代码如下：

/* lily pad positioning */

#link1 {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#link2 {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-right: 55px;
}

#link3 {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}

#link4 {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}


/* lily pad positioning */


/* image hover css */

#hover1 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay1 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box1:hover #overlay1 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX TWO */

#hover2 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay2 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box2:hover #overlay2 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX THREE */

#hover3 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay3 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box3:hover #overlay3 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX FOUR */

#hover4 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay4 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box4:hover #overlay4 {
  opacity: 20;
  height: 128px;
  width: 128px;
}

<div id="nav_box">
  <!--nav box open-->
  <div id="box1">
    <img id="link1" src="lilypad.png" alt="lilypad">
    <div id="overlay1">
      <span id="hover1">Hello!!!</span>
    </div>
  </div>

  <div id="box2">
    <img id="link2" src="lilypad.png" alt="lilypad">
    <div id="overlay2">
      <span id="hover2">Hello!!!</span>
    </div>
  </div>

  <div id="box3">
    <img id="link3" src="lilypad.png" alt="lilypad">
    <div id="overlay3">
      <span id="hover3">Hello!!!</span>
    </div>
  </div>


  <div id="box4">
    <img id="link4" src="lilypad.png" alt="lilypad">
    <div id="overlay4">
      <span id="hover4">Hello!!!</span>
    </div>
  </div>


</div>
<!--nav box close-->

Answer 1

在每个叠加层父对象上设置position:relative。

由于您的悬停叠加层设置为position:absolute，因此将其从页面流中分离出来，因此在它们上方需要使用position:relative来放置一些父元素。绝对元素的位置由HTML结构中最接近的 relative 元素确定。如果HTML结构中的任何内容都未设置为相对，则浏览器将使用整个文档窗口，这意味着悬停覆盖全部显示在浏览器的左边缘。

无论如何，您都过度使用了ID；效率低下。您应该利用类，这是了解CSS的最基本的知识。实际上，您可能永远不需要这样细粒度的ID，并且如果您在1000个元素的情况下使浏览器陷入瘫痪，则可能有人会考虑性能。

Codepen

#nav_box {
  display: flex;
}

.link {
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
  position: relative;
}


.label {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

.overlay {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

.box:hover .overlay {
  opacity: 20;
  height: 128px;
  width: 128px;
}

<div id="nav_box">

  <div id="box1" class="box">
    <img class="link" src="lilypad.png" alt="lilypad">
    <div class="overlay">
      <span class="label">Hello 111!!!</span>
    </div>
  </div>

  <div id="box2" class="box">
    <img class="link" src="lilypad.png" alt="lilypad">
    <div class="overlay">
      <span class="label">Hello 222!!!</span>
    </div>
  </div>

  <div id="box3" class="box">
    <img class="link" src="lilypad.png" alt="lilypad">
    <div class="overlay">
      <span class="label">Hello 333!!!</span>
    </div>
  </div>


  <div id="box4" class="box">
    <img class="link" src="lilypad.png" alt="lilypad">
    <div class="overlay">
      <span class="label">Hello 444!!!</span>
    </div>
  </div>


</div>
<!--nav box close-->

Answer 2

对于四个链接ID和相关的叠加层，您的CSS都是相同的：因此，您应使用类而不是 id 。这将大大减少您的代码。我已经调整了您的代码以使用类，但是我离开了box1：hover .overlay {} / box2等。css（最后），因为您可能希望在悬停时显示不透明/不同大小的盒子等。 text和alt text，以便您可以看到哪个是哪个（因为图像不会显示在代码段中），然后将background-color添加到一个{{1} }只是为了说明，如果要调整悬停时框的颜色，可以在：hover css中进行修改。

请注意，您可以使用多个类。我为空白css（.l1和.l2）创建了单独的类。您可以根据需要进行调整，和/或根据需要创建更多

希望这会有所帮助！

（附言。我只是为了进行悬停演示而将它们浮动到右侧而不是左侧，但是您当然可以将其改回）

box2:hover

/* lily pad positioning */

.lilylink {
  display: inline-block;
  position: relative; 
  vertical-align:top;
  float:right;
  width: 128px;
  height: 128px;
  height: auto;
  padding:10px;
}

.l1 {
  margin-left: 35px;
}

.l2 {
  margin-right: 55px;
}


/* lily pad positioning */


/* image hover css */

.hovering {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

.overlay {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}

#box1:hover .overlay {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX TWO */

#box2:hover .overlay {
  opacity: 20;
  height: 128px;
  width: 128px;
  background-color:blue;
}


/* BOX THREE */

#box3:hover .overlay {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX FOUR */

#box4:hover .overlay {
  opacity: 20;
  height: 128px;
  width: 128px;
}

Answer 3

使用display: inline-block而不是浮点数。在下面的代码段中，我使用了适用于box1、2、3和4的以下规则来覆盖您的设置，但是您应该清除浮动内容。 （边界就是在那里，可以使div区域可见）

#nav_box > div {
  border: 1px dotted green; 
  float: none;
  display: inline-block;
}

顺便说一句：如果结合使用子元素设置相同的CSS选择器和类，则可以省略很多CSS代码。

/* lily pad positioning */

#link1 {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#link2 {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-right: 55px;
}

#link3 {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}

#link4 {
  display: block;
  float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}


/* lily pad positioning */


/* image hover css */

#hover1 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay1 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box1:hover #overlay1 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX TWO */

#hover2 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay2 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box2:hover #overlay2 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX THREE */

#hover3 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay3 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box3:hover #overlay3 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX FOUR */

#hover4 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay4 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box4:hover #overlay4 {
  opacity: 20;
  height: 128px;
  width: 128px;
}
#nav_box > div {
  border: 1px dotted green; 
  float: none;
  display: inline-block;
}

<div id="nav_box">
  <!--nav box open-->
  <div id="box1">
    <img id="link1" src="lilypad.png" alt="lilypad">
    <div id="overlay1">
      <span id="hover1">Hello 1 !!!</span>
    </div>
  </div>

  <div id="box2">
    <img id="link2" src="lilypad.png" alt="lilypad">
    <div id="overlay2">
      <span id="hover2">Hello 2!!!</span>
    </div>
  </div>

  <div id="box3">
    <img id="link3" src="lilypad.png" alt="lilypad">
    <div id="overlay3">
      <span id="hover3">Hello 3!!!</span>
    </div>
  </div>

 
  <div id="box4">
    <img id="link4" src="lilypad.png" alt="lilypad">
    <div id="overlay4">
      <span id="hover4">Hello 4!!!</span>
    </div>
  </div>


</div>
<!--nav box close-->

Answer 4

我对您的CSS做了一些更改，下面的代码应该可以工作。

您要记住的是，将元素设置为绝对值将寻找具有相对位置的父对象。因此，您需要将其添加到父元素中并设置绝对元素的位置，在示例中我使用的是左右。

此外，由于代码重复很多，因此我为box，link，hover和overlay添加了类，它之所以起作用，是因为在发生hover事件时，它只会修改子元素的叠加层，而不会修改其他元素。

/* box positioning */
.box {
  position: relative;
  float: left;
  display: flex;
  flex-flow: row wrap;
}

/* lily pad positioning */

.link { 
  box-sizing: border-box;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin: 10px;
}

/* hover elements */

.hover {
 font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

/* overlay elements */

.overlay {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 10px;
}

/* box hover */

.box:hover .overlay {
  border: 2px solid pink;
  opacity: 1;
}

<div id="nav_box">
  <!--nav box open-->
  <div id="box1" class="box">
    <img id="link1" class="link" src="lilypad.png" alt="lilypad">
    <div id="overlay1" class="overlay">
      <span id="hover1"class="hover">Hello!!!</span>
    </div>
  </div>

  <div id="box2" class="box">
    <img id="link2" class="link" src="lilypad.png" alt="lilypad">
    <div id="overlay2" class="overlay">
      <span id="hover2"class="hover">Hello!!!</span>
    </div>
  </div>

  <div id="box3" class="box">
    <img id="link3" class="link" src="lilypad.png" alt="lilypad">
    <div id="overlay3" class="overlay">
      <span id="hover3"class="hover">Hello!!!</span>
    </div>
  </div>


  <div id="box4" class="box">
    <img id="link4" class="link" src="lilypad.png" alt="lilypad">
    <div id="overlay4" class="overlay">
      <span id="hover4"class="hover">Hello!!!</span>
    </div>
  </div>


</div>
<!--nav box close-->

Answer 5

这是您要制作的吗？

/* lily pad positioning */
#box1{
  display:inline-block;
}
#box2{
  display:inline-block;
}
#box3{
 display:inline-block;
}
#box4{
 display:inline-block;
}
#link1 {
  display: block;
  //float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#link2 {
  display: block;
  //float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-right: 55px;
}

#link3 {
  display: block;
  //float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}

#link4 {
  display: block;
  //float: left;
  width: 128px;
  height: 128px;
  height: auto;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}


/* lily pad positioning */


/* image hover css */

#hover1 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay1 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box1:hover #overlay1 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX TWO */

#hover2 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay2 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box2:hover #overlay2 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX THREE */

#hover3 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay3 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box3:hover #overlay3 {
  opacity: 20;
  height: 128px;
  width: 128px;
}


/* BOX FOUR */

#hover4 {
  font-family: Helvetica;
  font-weight: bold;
  text-align: center;
  color: #234d20;
  font-size: 25px;
}

#overlay4 {
  background: rgba(119, 171, 89, .85);
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  height: 128px;
  width: 128px;
  position: absolute;
  overflow: hidden;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-left: 35px;
}

#box4:hover #overlay4 {
  opacity: 20;
  height: 128px;
  width: 128px;
}

<div id="nav_box">
  <!--nav box open-->
  <div id="box1">
    <img id="link1" src="lilypad.png" alt="lilypad">
    <div id="overlay1">
      <span id="hover1">Hello!!!</span>
    </div>
  </div>

  <div id="box2">
    <img id="link2" src="lilypad.png" alt="lilypad">
    <div id="overlay2">
      <span id="hover2">Hello!!!</span>
    </div>
  </div>

  <div id="box3">
    <img id="link3" src="lilypad.png" alt="lilypad">
    <div id="overlay3">
      <span id="hover3">Hello!!!</span>
    </div>
  </div>


  <div id="box4">
    <img id="link4" src="lilypad.png" alt="lilypad">
    <div id="overlay4">
      <span id="hover4">Hello!!!</span>
    </div>
  </div>


</div>
<!--nav box close-->