Question

当我将div con2悬停时我想隐藏div con1，反之亦然。当我悬停con1时我能够隐藏con2但是反之亦然。当我将con2悬停在隐藏con1时，为什么它不起作用。以下是代码：

<html>
  <head>
    <title>Home</title>
    <style type="text/css">
      #con1{
        float: left;
        width: 500px;
        height: 300px;
        background: #f00;
      }

      #con2{
        float:left;
        width: 500px;
        height: 300px;
        background: #808;
      }

      #con1:hover ~#con2{
        visibility:hidden;
      }

      #con2:hover ~#con1{
        display:none;
      }

    </style>
  </head>
  <body>

    <div id="con1">
    </div>
    <div id="con2">
    </div>

  </body>
</html>

示例：http://jsfiddle.net/mendesjuan/s8bbe/

Answer 1

我相信这对于一般的兄弟选择器来说是不可能的，因为它只适用于html结构中的元素。查看更多：http://css-tricks.com/child-and-sibling-selectors/

一种可能的（尽管不是特别优雅的解决方案）： http://jsfiddle.net/s8bbe/4/

<div id="wrapper">
<div id="con1">
</div>
<div id="con2">
</div>

  #con1{
    float: left;
    width: 500px;
    height: 300px;
    background: #f00;
  }

  #con2{
    float:left;
    width: 500px;
    height: 300px;
    background: #808;
  }

  #con1:hover ~#con2{
    visibility:hidden;
  }

  #wrapper:hover #con1:not(:hover){
    visibility:hidden;
  }

Answer 2

将div放在一个容器div中你可以隐藏胡佛上所有包含的div，但实际上并没有隐藏起来的那个：

        div:hover div {
            visibility: hidden;
        }

        div:hover div:hover {
            visibility: visible;
        }

请参阅演示：http://jsfiddle.net/TcPJZ/3/

编辑：它实际上适用于任意数量的div（参见演示）。

Answer 3

示例：http://jsfiddle.net/s8bbe/5/

@ KnutSv的解决方案很棒。如果使用超过2个div，这是一个附加组件。

<div id="con-wrapper">  
    <div id="con1">
    </div>
    <div id="con2">
    </div>
    <div id="con3">
    </div>    
</div>

一个单行的css：hover，：not（：hover）。

  #con1{
    float: left;
    width: 500px;
    height: 300px;
    background: #f00;
  }

  #con2{
    float:left;
    width: 500px;
    height: 300px;
    background: #808;
  }

  #con3{
    float:left;
    width: 500px;
    height: 300px;
    background: #606;
  }

  #con-wrapper:hover > div:not(:hover) {
     visibility: hidden;
  }

使用“＆gt; div”将定位所有＃con-wrapper 直接 div 子项，这些子项不会悬停，并隐藏它们。

使用＃con-wrapper：hover＆gt; div [id ^ = con]：not（：hover）如果只需要瞄准。

Answer 4

也许您使用了错误的选择器

试试这个

.con2:hover ~ div {display:none}

但这是“硬代码”，如果你想在con-2之前添加更多div，它们也会消失

Answer 5

我在jsfiddle上试试，我遇到了问题。

当你有这个：

<div id="con1">
</div>
<div id="con2">
</div>

将鼠标悬停在＆＃34; con1＆＃34;有效，但当你改变立场时：

<div id="con2">
</div>
<div id="con1">
</div>

现在＆＃34; con2＆＃34;这是工作，现在不是＆＃34; con1＆＃34;。

所以，我不知道如何修复它，但我可以通过Javascript / Jquery告诉你它。

我认为可以解决问题。

Answer 6

使用jquery使用下面的代码可以轻松完成，为什么你只依赖于css

$("#con1").hover(function(){
  $("#con2").css("visibility","hidden");

  },function(){
  $("#con2").css("visibility","visible");
});

这是工作样本http://jsfiddle.net/5jRXm/

Answer 7

CSS不支持以前的兄弟选择。如果你仍然想要一个以前的兄弟选择器，那么你应该查看javascript。

var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');


function displayElem(el, property, value){
    el.style[property] = value;
}

con1.onmouseover = displayElem.bind(null, con2, 'display', "none");
con1.onmouseout = displayElem.bind(null, con2, 'display', "");
con2.onmouseover = displayElem.bind(null, con1, 'visibility', "hidden");
con2.onmouseout = displayElem.bind(null, con1, 'visibility', "");

Working Fiddle

在上面的小提琴中，我甚至将下一个兄弟选择移动到javascript，以便让您保持代码结构化。如果你不想这样做，那么很高兴不要将事件发送到第一个元素：）

如何使用CSS隐藏div与另一个div

7 个答案: