如何让图像悬停在每一行？

Question

我就是想这样做

我正在尝试创建一个没有 header 的 3 列 8 行的 table。我希望将鼠标放在每一行上时显示不同的图像。我正在使用构建器网站，图像已上传到构建器。

解释了如何进行悬停，但是当我把它放在网格中时，该功能消失了： https://support.cargo.site/Show-an-Image-on-Hover

<br>
  <div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
      <div grid-col="x10" grid-pad="0" class="">
          <div style="text-align: center">
              <h1>01</h1>
          </div>
      </div>
      <div grid-col="x10" grid-pad="0" class="">
          <h1>France</h1>
      </div>
      <div grid-col="x10" grid-pad="0" class="">
          <h1>1990</h1>
      </div>
  </div>
  <div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
      <div grid-col="x10" grid-pad="0" class="">
          <div style="text-align: center">
              <h1>02</h1>
          </div>
      </div>
      <div grid-col="x10" grid-pad="0" class="">
          <h1>Italy</h1>
      </div>
      <div grid-col="x10" grid-pad="0" class="">
          <h1>1998</h1>
      </div>
  </div>
<br>

欢迎任何帮助

Answer 1

仅适用于 CSS

使用 table 边框可能太复杂而无法管理。所以我向您推荐这个解决方案，因为您已经在 post.

中使用了 div

我正在用 class table.

修复第一个容器中的 table

然后我设置 row 没有 border-bottom 除了最后一个 child.

然后我把边框设置在cell里面。

最后设置 :hover 如下：

.row:hover {
   border: 1px solid red;
 }
 .row:hover + .row {
   border-top: none;
 }

+用于移除上一个兄弟的上边框。

要添加图像，我只需逐行添加一个 img，当一行悬停时我会显示该图像。

我还在 .cell 上设置了更重要的 z-index 以确保 table 保持在图像前面

演示：

.table  {
  display:flex;
  flex-direction:column;
  width:400px;
}

.row{
  width: 100%;
  display:flex;
  flex-direction: row;
}
.row img{
  z-index: 1;
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.row div{
  z-index: 2;
}
.row:last-child .cell{
  border-bottom: 1px solid black;
}
.cell:nth-last-child(2){
  border-right:1px solid black;
}
.cell{
  border:1px solid black;
  border-bottom: none;
  border-right: none;
}
.w-25{
  width:25%;
}
.w-50{
  width:50%;
}
.row:hover .cell {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}
.row:hover .cell:first-child {
  border-left: 1px solid red;
}
.row:hover .cell:nth-last-child(2) {
  border-right: 1px solid red;
}

.row:hover img{
  display: block;
}

<div class="table">
  <div class="row">
    <div class="cell w-25">01</div>
    <div class="cell w-50">France</div>
    <div class="cell w-25">1990</div>
    <img src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png" />
  </div>
  <div class="row">
    <div class="cell w-25">02</div>
    <div class="cell w-50">Italy</div>
    <div class="cell w-25">1998</div>
    <img src="https://media.istockphoto.com/vectors/family-on-bikes-in-park-vector-id1174981037" />
  </div>
</div>

如何让图像悬停在每一行？

How can to make an image hover in each row?

css

grid

hover

row

mouseevent