Как сделать так, чтобы при наведении мыши на один блок, он плавно исчез, а другой блок плавно появился?

Question

В целом, вот такой код уже есть. Я не знаю как сделать зависимость еще и к первичному блоку, чтобы он пропал и появился другой. Желательно решение на 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>

Answer 1

Дай двум блокам id, и события наведения для каждого, через jquery, при событии наведения на один, ставь через стили opacity:0 для другого, и наоборот

$('#div1').hover(() => {
 $('#div2').css('opacity','0');
});

БЛОГ НА HUSL

Как сделать так, чтобы при наведении мыши на один блок, он плавно исчез, а другой блок плавно появился?

Ответы (1 шт):