调整产品列表
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s

This commit is contained in:
2026-04-14 17:35:27 +08:00
parent 80d3aa8160
commit a18ff844a4
2 changed files with 40 additions and 48 deletions

View File

@@ -102,7 +102,7 @@
<div class="header-nav-actions">
<div class="header-search-wrapper">
<span class="header-nav-btn">
<img src="__IMAGES__/s1.png" alt="" style="width: 17px;height: 17px;">
<img src="__IMAGES__/s1.png" alt="" style="width: 20px;height: 20px;">
</span>
<div class="header-search-dropdown" id="searchDropdown">
<span class="header-search-dropdown-delete-icon"></span>
@@ -190,37 +190,37 @@
<div id="mhk"></div>
<script>
// 获取所有包含商品卡片的元素
const productCards = document.querySelectorAll('.header-buy-product-card');
// // 获取所有包含商品卡片的元素
// 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');
// 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;
// // 检查悬浮图是否存在因为HTML中用了if判断所以可能有也可能没有这个元素
// const hasHoverImg = hoverImg !== null;
// 如果没有悬浮图,不需要任何交互,直接返回
if (!hasHoverImg) return;
// // 如果没有悬浮图,不需要任何交互,直接返回
// if (!hasHoverImg) return;
// 初始状态确保普通图显示,悬浮图隐藏
defaultImg.style.opacity = '1';
hoverImg.style.opacity = '0';
// // 初始状态确保普通图显示,悬浮图隐藏
// defaultImg.style.opacity = '1';
// hoverImg.style.opacity = '0';
// 鼠标移入事件:显示悬浮图,隐藏普通图
card.addEventListener('mouseenter', () => {
defaultImg.style.opacity = '0';
hoverImg.style.opacity = '1';
});
// // 鼠标移入事件:显示悬浮图,隐藏普通图
// card.addEventListener('mouseenter', () => {
// defaultImg.style.opacity = '0';
// hoverImg.style.opacity = '1';
// });
// 鼠标移出事件:恢复普通图,隐藏悬浮图
card.addEventListener('mouseleave', () => {
defaultImg.style.opacity = '1';
hoverImg.style.opacity = '0';
});
});
// // 鼠标移出事件:恢复普通图,隐藏悬浮图
// card.addEventListener('mouseleave', () => {
// defaultImg.style.opacity = '1';
// hoverImg.style.opacity = '0';
// });
// });
//产品列表在hover复位tabs选择
const productNavContainer = document.querySelector('.header-nav-item:first-child');