В целом, вот такой код уже есть. Я не знаю как сделать зависимость еще и к первичному блоку, чтобы он пропал и появился другой. Желательно решение на CSS, но если нельзя, то и JS можно (в проекте есть jquery).
* {
transition: 0.5s;
}
.test1 {
background-color: red;
}
.test2 {
background-color: green;
opacity: 0;
}
.test1:hover~.test2 {
opacity: 1;
}
<div class='test1'>1</div>
<div class='test2'>2</div>