悬浮图判断

app/index/view/pc/public/header.html

@@ -174,7 +174,9 @@
                 <a class="header-buy-product-card" target="_self" href="{$ma.link}">
                     <div class="header-buy-product-img">
                         <img class="header-default-img" src="{$ma.image}" alt="{$ma.name}">
+                        {if condition="!empty($ma.hover_image)"}
                         <img class="header-hover-img" src="{$ma.hover_image}" alt="{$ma.name}">
+                        {/if}
                     </div>
                     <div class="header-buy-product-title">{$ma.name}</div>
                 </a>
@@ -187,7 +189,37 @@
 <div style="width: 100vw;height: 64px;"></div>
 <script>
 
+    // 获取所有包含商品卡片的元素
+    const productCards = document.querySelectorAll('.header-buy-product-card');
 
+    productCards.forEach(card => {
+            // 获取卡片内的图片容器和两张图片
+            const imgContainer = card.querySelector('.header-buy-product-img');
+            const defaultImg = imgContainer?.querySelector('.header-default-img');
+            const hoverImg = imgContainer?.querySelector('.header-hover-img');
+            
+            // 检查悬浮图是否存在（因为HTML中用了if判断，所以可能有也可能没有这个元素）
+            const hasHoverImg = hoverImg !== null;
+            
+            // 如果没有悬浮图，不需要任何交互，直接返回
+            if (!hasHoverImg) return;
+            
+            // 初始状态确保普通图显示，悬浮图隐藏
+            defaultImg.style.opacity = '1';
+            hoverImg.style.opacity = '0';
+            
+            // 鼠标移入事件：显示悬浮图，隐藏普通图
+            card.addEventListener('mouseenter', () => {
+                defaultImg.style.opacity = '0';
+                hoverImg.style.opacity = '1';
+            });
+            
+            // 鼠标移出事件：恢复普通图，隐藏悬浮图
+            card.addEventListener('mouseleave', () => {
+                defaultImg.style.opacity = '1';
+                hoverImg.style.opacity = '0';
+            });
+    });
     //产品列表在hover复位tabs选择
     const productNavContainer = document.querySelector('.header-nav-item:first-child');
 
@@ -402,7 +434,6 @@
     if (buyWrapper && buyDropdown) {
         buyWrapper.addEventListener('click', () =>
         {
-            console.log('123232323')
             buyDropdown.classList.add('show');
         });
     }