CSS - How to hide div by hovering another div

Question

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

Example:

<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.

So what is the question? Your code says "this works"... On a side note, your code contains two elements with the same ID. This is not allowed and is likely the cause of the issue, since the last CSS rule will only work for one of them. — GolezTrol, Jul 20 '16 at 17:11
Problem is that woking solution is different and it only demonstrate usage of >... — Raold, Jul 20 '16 at 17:15

Qwertiy · Accepted Answer · 2016-07-20T17:32:07.573

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

Thank you, but can u tell me what is the difference between ">", "+" and "~"? — Raold, Jul 20 '16 at 17:13
`>` this selects direct child of some element, `~` this select all sibling elements of some element` and `+` this selects only next sibling of element. — Nenad Vracar, Jul 20 '16 at 17:17

score 3 · Answer 2 · answered Jul 20 '16 at 17:12

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

For first .main div you can use .main div:hover + .two to hide .two when you hover over .one
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>

score 0 · Answer 3 · answered Jul 20 '16 at 17:14

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>

CSS - How to hide div by hovering another div

3 Answers3