Javascript Magento：如何在best-sellers.phtml文件中创建鼠标悬停图像？

在Magento的“畅销书”栏中，我有固定的图片，我想用鼠标覆盖的图片替换

以下是best-sellers.phtml中的初始代码：

<div>
   <a href="<?php echo $_product->getProductUrl($_product); ?>">
      <img src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>" width=« 220" height=« 276" alt="<?php echo $_product->getName(); ?>" />
   </a>
</div>

我将初始代码更改为：

<img onmouseover="this.src='http://www.mywebsite/media/wysiwyg/chaise-design-italie-hip_trans-Verso_1.png';             
" onmouseout="this.src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>" 
" src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>" 
width=« 220" height=« 276" alt="<?php echo $_product->getName(); ?>" />

init（$_产品，“缩略图”）->调整大小（220276）；？>" 
“src=”
宽度=«220”高度=«276”alt=”“/>

结果是：源图像出现，鼠标悬停图像出现，但鼠标悬停时什么也没有发生，它会一直显示鼠标悬停图像。

知道我做错了什么吗

---

非常感谢你的帮助

请参考此文件，它可能会对您有所帮助

非常感谢Rohit Goel！