我希望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>这就是我认为你想做的事情。请注意，我添加了 html 实体以确保div 显示出来。您可能只需在元素上设置最小高度。
CSS 的工作原理：
由于我永远无法想到将鼠标悬停在 DOM 中技术上不存在的东西上将在哪里工作，因此您希望在桌子上查找悬停，然后更改其后.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>