Html 如何使用CSS从另一个div隐藏一个div_Html_Css

Html 如何使用CSS从另一个div隐藏一个div

html css

Html 如何使用CSS从另一个div隐藏一个div,html,css,Html,Css,我想在悬停div con2时隐藏div con1，反之亦然。我可以在悬停con1时隐藏con2，但反之亦然。为什么当我悬停con2以隐藏con1时它不起作用。代码如下： <html> <head> <title>Home</title> <style type="text/css"> #con1{ float: left; width: 500px; he

我想在悬停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>


家
#con1{
浮动：左；
宽度：500px；
高度：300px；
背景：#f00；
}
#con2{
浮动：左；
宽度：500px；
高度：300px；
背景:#808；
}
#con1:悬停#con2{
可见性：隐藏；
}
#con2:悬停#con1{
显示：无；
}

示例：

可能您使用了错误的选择器

试试这个

.con2:hover ~ div {display:none}

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

我在jsfiddle上尝试了一下，我发现了这个问题

当你有这个：

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

将鼠标悬停在“con1”上可以工作，但当您更改位置时：

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

现在是“con2”在起作用，而不是“con1”

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

我认为这可以解决问题。

使用jquery使用下面的代码很容易做到，为什么您只依赖css

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

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

以下是工作示例

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', "");

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

我认为使用常规同级选择器是不可能的，因为它只应用于html结构中它后面的元素。请参阅更多：

一个可能的解决方案（尽管不是特别优雅）：

将div放在一个容器div中，可以隐藏hoover上包含的所有div，但不能隐藏实际“悬停”的div：

        div:hover div {
            visibility: hidden;
        }

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

请参见演示：

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

示例：

@KnutSv的解决方案很好。如果使用2个以上的div，这里有一个附加组件

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

使用“>div”将针对所有未悬停的#con wrapper direct div子项并将其隐藏

使用#con wrapper:hover>div[id^=con]：如果只需要针对cons，则不（：hover）。

css不支持以前的同级选择。JQuery可以解决您的问题，但使用css无法做到这一点。我原以为这也可以，但事实并非如此。在回答问题之前，你应该试一试。尽管这样做很有效，但这个问题显然需要一个CSS解决方案，而没有提到jQuery。正确的答案是：不，你不能，有一个explanation@JuanMendes这取决于透视图OP@Arun_SE没有看到任何文字？问题的标题是“如何使用CSS从另一个div隐藏一个div”我没有看到任何像我只想在CSS上这样的词。。他们必须知道解决方案，不想停留在这里——我知道这可以通过JavaScript实现。只是我只想用CSS来做。不管怎样，我也为你的回答感到高兴@Arun\u非常好，我正试图想出一些类似的破解方法，我想不出

：hover:not（：hover）

非常非常感谢。我从来没想过CSS也有“不”这个词！

        div:hover div {
            visibility: hidden;
        }

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

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

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