通过单击非父 div 隐藏 div答案

【问题标题】：hide a div by clicking a non-parent div通过单击非父 div 隐藏 div
【发布时间】：2013-08-30 13:37:57
【问题描述】：

在我的网站中有两个不同的 div，但它们具有相同的父 div（两个子 div）。所以，我想这样做：div.1:hover -> div.2{display:none}。如何使用 CSS 来实现？

【问题讨论】：

【解决方案1】：

根据 HTML 的布局方式，它可以工作。 div 需要彼此相邻，如下所示：

<div class="first">
  First div
</div>
<div class="second">
  Second div
</div>

然后使用这个 CSS：

div.first:hover + div.second { display: none; }

【讨论】：

【解决方案2】：

您可以使用 JQuery 轻松完成此操作。

$(document).ready(function(){$("#first").hover(function(){$("#second").hide();}, function(){$("#second").show();});});

解释： 这段代码为 document.ready 上的第一个元素添加了一个“悬停”处理程序，当鼠标进入时我们隐藏第二个元素，当鼠标离开时，我们再次显示它。

这样，无论元素在布局中的什么位置，它都可以工作。

请看这里： http://jsfiddle.net/avrahamcool/RenK2/

编辑如果您希望在单击第一个 div 时隐藏第二个 div，请使用 $("#first").click(function(){$("#second").hide();}) 而不是 hover(..)

【讨论】：

【解决方案3】：

这是一个简单的方法：

如果你有类似这样的 HTML：

<div class="wrap">
    <div class="first">First div</div>
    <p>some other element...</p>
    <div class="second">Second div</div>
</div>

您的 CSS 将是：

.first:hover ~ .second {
    display: none;
}

一个限制是.first 和.second 必须是同一父元素中的兄弟元素，在本例中为.wrap。

IE7+ 支持通用兄弟组合~

【讨论】：