通过单击非父div来隐藏div

Question

在我的网站上有两个不同的div，但它们有相同的父div（两个子div）。所以，我想这样做：div.1:hover - ＆gt; div.2{display:none}。我怎么能用CSS做到这一点？

Answer 1

根据HTML的布局方式，它可以工作。 div必须像这样彼此相邻：

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

然后使用这个CSS：

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

在这里小提琴：http://jsfiddle.net/CyT2N/

Answer 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(..)

请参见此处： http://jsfiddle.net/avrahamcool/RenK2/1/

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

演示于：http://jsfiddle.net/audetwebdesign/HQN6n/

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

IE7 +

支持通用兄弟组合~

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors