时间戳

首页 > 解决方案 > 悬停时隐藏外部节点元素

html - 悬停时隐藏外部节点元素

问题描述

将中心元素悬停在此示例上时，我想隐藏底部和顶部元素：

<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; }

但它不起作用，甚至打破了我的第一条指令。

我究竟做错了什么 ？

标签： htmlcss

解决方案

实际上你可以用 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>

这将完全符合您的要求，显示：“none” id 为“ct”的 DOM 元素。

推荐阅读