如何使这是一个悬停的Div淡出在div

<div class="container">
  <div class="hover-div">悬停的Div</div>
  <div class="target-div">目标Div</div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.hover-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  opacity: 1;
  transition: opacity 0.5s;
}

.target-div {
  opacity: 0;
  background-color: #00f;
  width: 100%;
  height: 100%;
}

const container = document.querySelector('.container');
const hoverDiv = document.querySelector('.hover-div');
const targetDiv = document.querySelector('.target-div');

container.addEventListener('mouseover', () => {
  hoverDiv.style.opacity = 0;
  targetDiv.style.opacity = 1;
});

container.addEventListener('mouseout', () => {
  hoverDiv.style.opacity = 1;
  targetDiv.style.opacity = 0;
});