时间戳

首页 > 解决方案 > 如何在网页中悬停时隐藏/显示网格单元格？

html - 如何在网页中悬停时隐藏/显示网格单元格？

问题描述

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

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

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

.cell_static #cell_hover {
  display: none;
  position: absolute;
}
<table>
  <tr>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="#" alt="1 B/W">
          </img>
        </a>
        <div id="cell_hover">
          <a href="#">
            <img src="#" alt="1 Colored">
            </img>
          </a>
        </div>
      </div>
    </td>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="#" alt="2 B/W">
          </img>
        </a>
        <div id="cell_hover">
          <a href="#">
            <img src="#" alt="2 Colored">
            </img>
          </a>
        </div>
      </div>
    </td>
    <td>
      <div class="cell_static">
        <a href="#">
          <img src="#" alt="3 B/W">
          </img>
        </a>
        <div id="cell_hover">
          <a href="#">
            <img src="#" alt="3 Colored">
            </img>
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>

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

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

标签： htmlcss

解决方案

您可以尝试使用父（容器）元素 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>

工作小提琴

推荐阅读