时间戳

首页 > 解决方案 > CSS，图像上的悬停框仅出现在一张图像上

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

标签： htmlcss

解决方案

position:relative在每个覆盖父级上设置。

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

在任何情况下，您都在过度使用 id；这是低效的。你应该使用类，这是了解 CSS 最基本的东西。在实践中，您可能永远不需要如此细粒度的 id，如果您在 1000 个元素的情况下让浏览器陷入困境，那么可能有人会提出有关性能的案例。

密码笔

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

推荐阅读