我希望 div 中的图片位于表格下方，以便在悬停后显示内容，问题是我无法更改 html 所有元素应具有相同大小并显示为内联 block
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>最佳答案
这就是我认为您正在尝试做的事情。请注意，我添加了 html 实体以确保显示 div。您可能只在元素上设置一个最小高度。
CSS 的工作原理:
因为我永远不会想到将悬停在 DOM 中技术上不存在的东西上会起作用的情况，所以您想在 table 上寻找悬停，然后更改可见性.hide 元素。
.hide {
display: none;
}
table:hover+.hide {
display: inherit !important;
}<table>
<tbody>
<tr>
<td>Lorem.</td>
<td>Quaerat.</td>
</tr>
</tbody>
</table>
<div class="hide" style="background-image:url('//placehold.it/300x300')"> </div>关于css - 悬停后更改对象可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44874759/