Question

将鼠标悬停在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; }

但是它不起作用甚至中断了我的第一条指令。

我在做什么错了？

Answer 1

实际上，您可以使用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元素。

在悬停时隐藏外部节点元素

1 个答案: