<分区>
我想在将中心元素悬停在 this sample 上时隐藏底部和顶部元素:
<div id="tc">
<span id="ct">top</span>
<div id="pc">
<span id="st"></span>
<span id="tp">center</span>
</div>
<span id="tt">bottom</span>
</div>
我可以用 :
隐藏底部元素#pc:hover ~ #tt { display: none!important; }
我希望通过
对顶部元素完成相同的操作:#ct + #pc:hover { display: none!important; }
但它不起作用，甚至破坏了我的第一条指令。
我做错了什么？
最佳答案
实际上您可以使用 jQuery 来完成，因为选择上面的 DOM 非常困难。 所以这是替代解决方案
第 1 步:在 head 标记中添加 jQuery 脚本
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
第 2 步:将此代码放在元素下方
<script>
$( "#pc" ).hover(
function() {
$( "#ct" ).hide();
}, function() {
$( "#ct" ).show();
}
);
</script>
这将完全符合您的要求，显示:“无”ID 为“ct”的 DOM 元素。
关于html - 悬停时隐藏外部节点元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55319035/