Como fazer uma div desaparecer e a outra desaparecer em foco?

ão é necessário dizer que eu sou iniciante, especialmente quando se trata de JavaScript e jQuery. Estou procurando uma maneira de fazer uma div desaparecer (através da visibilidade, não da opacidade) e uma desaparece

Aqui está um exemplo do HTML que estou procurando.

<div class="container">
 <div class="secondary" style="height:100px;width:100px;display:none;">
  When you hover over .main, .secondary fades in and .main fades out
 </div>
 <div class="main" style="height:100px;width:100px;">
  This text is visible by default
 </div>
</div>

lhei em volta e não consegui encontrar exatamente o que estava procurand

Muito obrigado antecipadamente

questionAnswers(5)

yourAnswerToTheQuestion