将鼠标悬停在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>
我可以用:p隐藏底部元素
#pc:hover ~ #tt { display: none!important; }
我希望使用
对顶部元素完成相同的操作#ct + #pc:hover { display: none!important; }
但是它不起作用甚至中断了我的第一条指令。
我在做什么错了?
答案 0 :(得分:0)
实际上,您可以使用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元素。