gpt4 book ai didi

css - 悬停后更改对象可见性

转载 作者:行者123 更新时间:2023-11-28 03:28:11 24 4
gpt4 key购买 nike

我希望 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')">&nbsp;</div>

关于css - 悬停后更改对象可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44874759/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com