Убрать картинку при наведении

столкнулся со следующей проблемой: нужно, чтобы при наведении на articles__bg или articles__sub-title или articles__title фоновая полупрозрачная картинка articles__bg исчезла. При таком варианте при наведении на articles__column фон articles__bg исчезает, но если дальше навести на articles__sub-title или articles__title, вновь появляется

//html
<div class="articles__column">
  <img src="фоновая, полупрозрачная картинка" class="articles__bg">
  <img src="фон.png">
  <p class="articles__sub-title">Заголовок</p>
  <p class="articles__title">Тексте</p>
</div>

//js
let articlesBg = document.querySelectorAll(".articles__bg");
let articlesColumn = document.querySelectorAll(".articles__column");
function clearBg(e) {
   for (let bg of articlesBg) {
      if (bg == e.target) {
         bg.style.display = "none";
      }
   }
}
document.addEventListener("DOMContentLoaded", function () {
   articlesColumn.forEach(element => {
      element.addEventListener("mouseover", clearBg);
   });
});

А такой вариент вообще не работает..

//js
function clearBg(e) {
   for (let column of articlesColumn) {
      if (column == e.target) {
         let bg = column.firstElemenChild;
         bg.style.display = "none";
      }
   }
}

Спасибо за помощь!