Question

我有两个3x3的图像网格：一个是黑白的，另一个是彩色的。我希望默认显示黑白网格，然后当用户将鼠标悬停在网格中的每个单元格上时，我希望将图像替换为其彩色版本。

问题是我无法将两个网格放在完全相同的位置。这是前三个单元格的HTML布局：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-between">
  <button class="btn btn-default">button1</button>


  <button class="btn btn-default">button2</button>

</div>

.cell_static:hover #cell_hover {
  display: block;
  position: absolute;
}

.cell_static #cell_hover {
  display: none;
  position: absolute;
}

问题是悬停时，彩色图片会直接显示在黑白图片的下方，而不是替换它们或直接显示在顶部。

如何修复CSS或重组div以达到我想要的效果？

Answer 1

您可以尝试使用父元素（容器）css并添加两个不同的子元素，一个在容器的正常状态下可见，另一个在悬停状态下可见

CSS：

td .cell_static, td:hover .cell_hover {
  display: block;
}

td .cell_hover, td:hover .cell_static{
  display: none;
}

HTML：

<table>
  <tr>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="#" alt="1 B/W">
          </img>
        </a>
      </div>
        <div class="cell_hover">
          <a href="#">
            <img src="#" alt="1 Colored">
            </img>
          </a>
        </div>
    </td>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="#" alt="2 B/W">
          </img>
        </a>
      </div>
        <div class="cell_hover">
          <a href="#">
            <img src="#" alt="2 Colored">
            </img>
          </a>
        </div>
    </td>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="#" alt="3 B/W">
          </img>
        </a>
      </div>
        <div class="cell_hover">
          <a href="#">
            <img src="#" alt="3 Colored">
            </img>
          </a>
        </div>
    </td>
  </tr>
</table>

Working fiddle

Answer 2

绝对定位时，它相对于最近的祖先（尚未设置）进行定位。在下面，我在绝对元素上添加了顶部和左侧，以将其放置在所需的位置，并且相对于静态单元格进行了添加。

另外，您可能还希望删除表-它们不应该用于布局，而只能用于表格数据，并且看起来不像表格数据。唯一的例外是，如果这是电子邮件模板

图片也是自动关闭的，不需要结束标签

.cell_static:hover #cell_hover {
  display: block;
}


/* add this */
.cell_static {
  position: relative;
}

.cell_static #cell_hover {
  display: none;
  position: absolute;
  /* add these */
  top: 0;
  left: 0;
  z-index:1; /* may need this to make sure it is over the other image */
}

<table>
  <tr>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="https://www.fillmurray.com/g/200/300" alt="1 B/W">
        </a>
        <div id="cell_hover">
          <a href="#">
            <img src="https://www.fillmurray.com/200/300" alt="1 Colored">
          </a>
        </div>
      </div>
    </td>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="https://www.fillmurray.com/g/200/300" alt="2 B/W">
        </a>
        <div id="cell_hover">
          <a href="#">
            <img src="https://www.fillmurray.com/200/300" alt="2 Colored">
          </a>
        </div>
      </div>
    </td>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="https://www.fillmurray.com/g/200/300" alt="3 B/W">
        </a>
        <div id="cell_hover">
          <a href="#">
            <img src="https://www.fillmurray.com/200/300" alt="3 Colored">
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>

如何在网页中的鼠标悬停时隐藏/显示网格单元？

2 个答案: