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>

Answer 2

Сначала вы должен использовать класс вместо id в вашем коде. Вы можете использовать селектор +, чтобы скрыть следующий элемент родного брата.

1. Для первого .main ДИВ вы можете использовать .main div:hover + .two, чтобы скрыть .two при наведении на .one
2. Для второго .main ДИВ вы можете использовать main div p:first-child:hover + .two, чтобы скрыть .two при наведении на первый p в .main или вы можете просто использовать .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

Каждый идентификатор на странице уникален. Вы не можете дублировать «основной» идентификатор или дублировать «один» идентификатор. Попробуйте следующее:

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