css - 通过单击非父 div 隐藏 div

Question

在我的站点中有两个不同的 div，但它们具有相同的父 div（两个子 div）。所以，我想这样做：div.1:hover-> 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