При наведении курсора на div1 открывать div2

.bg-green {background-color: green;} 
.bg-red {background-color: red;} 
.square {width: 100px; height: 100px; position: absolute;} 
 
.container {position: relative;} 
 
.b {display: none;}           /*B изначально скрыт*/ 
.a:hover+.b{display: block;}  /*показываем*/ 
.b:hover {display: block;}    /*сохраняем видимость */

<h4>Показать блок B при наведении на блок A</h4> 
<div class="container"> 
  <div class="bg-red square a">Block A</div> 
  <div class="bg-green square b">Block B</div> 
</div>

.bg-green {background-color: green;} 
.bg-red {background-color: red;} 
.square {width: 100px; height: 100px; position: absolute;} 
 
.container {position: relative;} 
 
.b {opacity: 0;}       /*B изначально скрыт*/ 
.b:hover{opacity: 1;}  /*показываем*/

<h4>Показать блок B при наведении на блок A</h4> 
<div class="container"> 
  <div class="bg-red square a">Block A</div> 
  <div class="bg-green square b">Block B</div> 
</div>