CSS - 如何通过悬停另一个div来隐藏div

Question

您好，我的一些 css 代码有问题。我创建了一个简单的 jsfiddle，所以我希望你能理解我的问题。

例子：

jsfiddle.net

<div id="main">
    <div id="one">
       <p>Hover to hide div below</p>
    </div>
      <div id="two">
       <p>hide me please</p>
    </div>
</div>
<div id="main">
    <div id="one">
       <p>Hover to hide div below (this works)</p>
       <div id="two">
       <p>hide me please</p>
    </div>
    </div>

</div>

CSS

#one{
  background-color:green;
  color:white;
  height:40px;
}
#two{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}
/* Help please */
#one:hover > #two {
    display:none;
}
#main #one:hover > #main #two {
  display:none;
}

谢谢你，如果有人可以编辑我的帖子并制作一个更好的标题，我将不胜感激。我的英语很弱。

Answer 1

#one{
  background-color:green;
  color:white;
  height:40px;
}

#two{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}

#one:hover + #two {
  display:none;
}

<div id="main">
  <div id="one">
    <p>Hover to hide div below</p>
  </div>
  <div id="two">
    <p>hide me please</p>
  </div>
</div>

#one{
  background-color:green;
  color:white;
  height:40px;
}
#two{
  background-color:red;
  color:white;
  height:40px;
}

#main #one:hover > #two:not(:hover) {
  display:none;
}

<div id="main">
  <div id="one">
    <p>Hover to hide div below (this works)</p>
    <div id="two">
      <p>hide me please</p>
    </div>
  </div>
</div>

谢谢，但是你能告诉我“>”、“+”和“~”之间有什么区别吗？

• >是任何直接孩子
• +是同一级别的下一个元素
• ~是同一级别上的任何下一个元素

div {
  margin: .25em 0;
  padding: .5em;
  box-sizing: border-box;
  display: inline-block;
  border: 3px solid;
  background: white;
}

div:hover {
  background: antiquewhite;
}

.base.base {
  background: silver;
}

.base   div { border-top-color:    red; }
.base > div { border-bottom-color: red; }
.base + div { border-left-color:   red; }
.base ~ div { border-right-color:  red; }

<div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class=base> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>