CSS - How to hide div by hovering another div [duplicate]

Question

Hi I have a problem with some css code. I created simple jsfiddle, so I hope you will understand my problem.

Example:

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

Thank you and if someone can edit my post and make better title I will be grateful. My English is weak.

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>

Thank you, but can u tell me what is the difference between ">", "+" and "~"

• > is any direct child
• + is one next element on the same level
• ~ is any of next elments on the same level

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>

Answer 2

First you should use class instead of id in your code. You can use + selector to hide next sibling element.

1. For first .main div you can use .main div:hover + .two to hide .two when you hover over .one
2. For second .main div you can use main div p:first-child:hover + .two to hide .two when you hover over first p in .main or you can just use .main div > .two

.one {
  background-color: green;
  color: white;
  height: 40px;
}
.two {
  background-color: red;
  color: white;
  height: 40px;
  display: in-line;
}
.main div:hover + .two,
.main div p:first-child:hover + .two {
  display: none;
}

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

Answer 3

Each id on the page is unique. You cannot have duplicate "main" id or duplicate "one" id. Try this:

<style>
.parent{
  background-color:green;
  color:white;
  height:40px;
}
.child{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}
/* Help please */
.parent:hover > .child {
    display:none;
}

</style>
<body>

<div>

    <div class="parent">
       <p>Hover to hide div below</p>

      <div class="child">
       <p>hide me please</p>
    </div>

</div>

<div >

    <div class="parent">
       <p>Hover to hide div below (this works)</p>

       <div class="child">
        <p>hide me please</p>
        </div>
    </div>

</div>