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

您的 css 对于四个链接 ID 和相关叠加层中的每一个都是相同的:因此您应该使用 classes 而不是 ids。这将大大减少您的代码。我已经调整了您的代码以使用类，但我留下了 box1:hover .overlay{}/box2 等 ..css(最后)，因为您可能希望在悬停时显示框具有不同的不透明度/不同大小等。我调整了text 和 alt text 以便您可以看到哪个是哪个(因为图像不显示在代码段中)，并添加到 background- color 到一个 box2:hover 只是为了说明，如果你想在悬停时调整框的颜色，你可以在 :hover css 中进行修改。

请注意，您可以使用多个类。我为边距 css(.l1 和 .l2)创建了单独的类。您可以根据需要调整这些，和/或在必要时创建更多

希望这对您有所帮助!

(p.s. 我将它们 float 到右侧而不是左侧，只是为了悬停演示，当然你可以改回去)

/* 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;
}

<div id="nav_box">
  <!--nav box open-->
  <div id="box1">
    <img class="lilylink l1" src="lilypad.png" alt="lilypad 1">
    <div class="overlay">
      <span class="hovering">Hello!!!</span>
    </div>
  </div>

  <div id="box2">
    <img class="lilylink l2" src="lilypad.png" alt="lilypad 2">
    <div class="overlay">
      <span class="hovering">Hello 2</span>
    </div>
  </div>

  <div id="box3">
    <img class="lilylink l1" src="lilypad.png" alt="lilypad 3">
    <div class="overlay">
      <span class="hovering">Hello 3</span>
    </div>
  </div>


  <div id="box4">
    <img class="lilyink l2" src="lilypad.png" alt="lilypad 4">
    <div class="overlay">
      <span class="hovering">Hello 4</span>
    </div>
  </div>


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