使用绑定到合适父节点的委托事件侦听器，您可以使用event本身通过检查event.target和/或event.currentTarget来识别元素-从那里您可以使用标准DOM导航技术（父节点，子节点，兄弟节点选择器）并相应地设计图像更改逻辑。
您没有明确说明图像源将更改为什么-因为您引用了favourite icon，我理解这意味着将主img src交换为最喜欢的图标src -很可能是错误的假设，但这可能会有所帮助

// The suitable parent container upon which we bind the delegated event listeners
const container=document.querySelector('#SOMEPARENT');

// mouseover - find all images & their sources
// as there are only 2 per `main-card` DIV you
// can simply swap sources like this...
// the same logic swaps sources back
const swapsources=(e)=>{
  if( e.target!=e.currentTarget ){
    let col=e.target.closest('div.main-card').querySelectorAll('img');
    let srcs=[...col].map(n=>n.src);
    col[0].src=srcs[1];
    col[1].src=srcs[0];
  }
}

container.addEventListener('mouseover',swapsources);
container.addEventListener('mouseout',swapsources);

.main-card {
  display: inline-block;
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem;
  background:white;
}

#SOMEPARENT{background:pink}

<div id='SOMEPARENT'>
  <div class="main-card">
    <div class="main-card-img-holder">
      <a href="#">
        <img src="//placekitten.com/200/300?image=1" alt="" class="main-card-img">
      </a>
    </div>
    <a href="#" class="main-card-name">
      <p><b>Nike AirJordan 4 Retro PSG</b></p>
    </a>
    <div class="main-price-holder">
      <p class="main-card-true-price">4 </p>
      <p class="main-card-false-price">8</p>
    </div>
    <div class="main-add-to-cart-div">
      <a href="#" class="main-add-to-cart-fav"><img src="//placekitten.com/200/300?image=5" alt="" class="FavIcon"></a>
      <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
    </div>
  </div>

  <div class="main-card">
    <div class="main-card-img-holder">
      <a href="#">
        <img src="//placekitten.com/200/300?image=2" alt="" class="main-card-img">
      </a>
    </div>
    <a href="#" class="main-card-name">
      <p><b>Yellow Banana Boots</b></p>
    </a>
    <div class="main-price-holder">
      <p class="main-card-true-price">54 </p>
      <p class="main-card-false-price">89</p>
    </div>
    <div class="main-add-to-cart-div">
      <a href="#" class="main-add-to-cart-fav"><img src="//placekitten.com/200/300?image=4" alt="" class="FavIcon"></a>
      <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
    </div>
  </div>
</div>

你可以在没有任何id属性的情况下实现hover脚本。使用hover事件的ev.target来识别相关的元素：

const body=document.querySelector("body"),
// define the hover picture here:
    hpic="https://picsum.photos/id/4/200/150";
["mouseover","mouseout"].forEach(ev=>body.addEventListener(ev,hover));

function hover(ev){
  const t=ev.target;
  // apply the hover logic on class "main-card-img" elements only:
  if (!t.classList.contains("main-card-img")) return;
  // first time the event is triggered for an element:
  if (!t.dataset.src) t.dataset.src=hpic;
  // swap picture sources when hovering:
  [t.src,t.dataset.src]=[t.dataset.src,t.src];
}

.FavIcon {width:32px}

<div class="main-card">
<div class="main-card-img-holder">
    <a href="#">
        <img src="https://picsum.photos/id/1/200/150" alt="" class="main-card-img">
    </a>
</div>
<a href="#" class="main-card-name"><p><b>Nike AirJordan 1 Retro PSG</b></p></a>
<div class="main-price-holder">
    <p class="main-card-true-price">4 </p>
    <p class="main-card-false-price">8</p>
</div>
<div class="main-add-to-cart-div">
    <a href="#" class="main-add-to-cart-fav"><img src="https://cdn-icons-png.flaticon.com/128/4379/4379542.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>
</div>
<div class="main-card">
<div class="main-card-img-holder">
    <a href="#">
        <img src="https://picsum.photos/id/2/200/150" alt="" class="main-card-img">
    </a>
</div>
<a href="#" class="main-card-name"><p><b>Nike AirJordan 2 Retro PSG</b></p></a>
<div class="main-price-holder">
    <p class="main-card-true-price">4 </p>
    <p class="main-card-false-price">8</p>
</div>
<div class="main-add-to-cart-div">
    <a href="#" class="main-add-to-cart-fav"><img src="https://cdn-icons-png.flaticon.com/128/4379/4379542.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>
</div>
<div class="main-card">
<div class="main-card-img-holder">
    <a href="#">
        <img src="https://picsum.photos/id/3/200/150" alt="" class="main-card-img">
    </a>
</div>
<a href="#" class="main-card-name"><p><b>Nike AirJordan 4 Retro PSG</b></p></a>
<div class="main-price-holder">
    <p class="main-card-true-price">4 </p>
    <p class="main-card-false-price">8</p>
</div>
<div class="main-add-to-cart-div">
    <a href="#" class="main-add-to-cart-fav"><img src="https://cdn-icons-png.flaticon.com/128/4379/4379542.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>
</div>

像Abronsius教授一样，我也使用委托事件处理。我在events.to中添加body元素，只过滤掉类为“main-card-img”的元素。

为什么不把 id 添加到卡片中呢？这样，您就可以编写JavaScript代码来识别选择了哪个元素，然后可以使用getElementById（'id'）获取所选元素的属性。
在你的代码中，我假设这是你想要选择的 div：

<div class="main-add-to-cart-div">
    <a href="#" class="main-add-to-cart-fav"><img src="img/icons/favorite.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>

字符串
你可以对class使用id来唯一标识它，然后获取img的src。

<div class="main-add-to-cart-div" id="myID">
    <a href="#" class="main-add-to-cart-fav"><img src="img/icons/favorite.png" alt="" class="FavIcon"></a>
    <a href="#" class="main-add-to-cart-link"><b>add to cart</b></a>
</div>

型
现在，您可以选择class，然后选择具有id的子元素。
如果你使用的是jquery，那么选择/识别元素会变得更容易。