Question

我想将div中的图片放在桌子下面，以便在悬停内容后显示，问题是我无法更改html所有元素应该是相同的大小并显示为内联块

td {
  display: block!important;
  visibility: hidden
}

.hide:hover:nth-child(n)+table:nth-child(n) tbody tr td.td1 {
  visibility: visible!important
}
.hide{width:100px; height:200px; display:inline-blocks;
}
tbody{width:100px; height:200px; display:inline-blocks;
}

<html>
<body>
<table>
  <tbody>
    <tr>
      <td class="td1"></td>
      <td class="td1"></td>
    </tr>
  </tbody>
</table>
<div id="more49042" class="hide" style="background-image:url("https://webkit.org/demos/srcset/image-src.png") !important">
</div>
<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<div id="more5343" class="hide" style="background-image:url("https://assets.crowdsurge.com/datacapture/example/img/example_logo.png") !important">
</div>
</body>
</html>

Answer 1

这是我想要做的想法。请注意，我添加了  html实体以确保显示div。你可以在元素上设置一个最小高度。

CSS如何运作：

因为永远不会有这样的情况，我可以想到在DOM上技术上不存在的东西悬停在哪里，你想要在桌子上寻找悬停，然后改变.hide元素后面的可见性。

＆＃13;

.hide {
  display: none;
}

table:hover+.hide {
  display: inherit !important;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>Lorem.</td>
      <td>Quaerat.</td>
    </tr>
  </tbody>
</table>
<div class="hide" style="background-image:url('//placehold.it/300x300')">&nbsp;</div>

＆＃13;

悬停后更改对象可见性

1 个答案: