如何将桌面端Hover效果转为移动端两步点击交互：先显样式再跳转

你用:active伪类达不到预期效果，是因为它仅在按住元素的瞬间生效，松开后样式就会消失，没法实现“第一次点击保留hover样式、第二次点击跳转”的需求。要实现这个逻辑，必须结合JavaScript来控制交互状态。

步骤1：更新CSS样式 #

新增一个激活状态类，让它和hover样式保持一致，这样通过JS切换类就能触发样式变化：

.newsflash-title a { 
    color: #ffffff; 
    display: flex; 
    height: 100%; 
    justify-content: center; 
    align-items: center; 
    transition: .5s ease-out; 
    box-sizing: border-box; 
    padding: 30px; 
}
/* 桌面端hover + 移动端激活状态共用样式 */
.newsflash-title:hover a,
.newsflash-title.is-active a { 
    background: rgba(0,67,100,.7); 
    color: #ffffff; 
}

步骤2：添加JavaScript交互逻辑 #

通过监听点击事件，记录点击状态，实现两次点击的不同行为：

// 获取所有目标链接
const newsLinks = document.querySelectorAll('.newsflash-title a');

newsLinks.forEach(link => {
    // 标记是否是第一次点击
    let isFirstClick = true;

    link.addEventListener('click', function(e) {
        // 判断当前是否为移动端（可根据项目断点调整逻辑）
        const isMobile = window.innerWidth < 768 || 'ontouchstart' in window;
        
        if (isMobile) {
            if (isFirstClick) {
                // 第一次点击：阻止跳转，切换激活样式
                e.preventDefault();
                this.closest('.newsflash-title').classList.toggle('is-active');
                isFirstClick = false;
            } else {
                // 第二次点击：允许跳转，重置状态
                isFirstClick = true;
            }
        }
        // 桌面端保持原有hover和跳转逻辑，不受影响
    });
});

补充优化（可选） #

如果需要适配窗口大小变化，可以添加resize监听，确保逻辑在窗口切换时正常工作：

function initMobileNewsLinkLogic() {
    const newsLinks = document.querySelectorAll('.newsflash-title a');
    
    newsLinks.forEach(link => {
        // 先移除旧事件，避免重复绑定
        link.removeEventListener('click', handleLinkClick);
        link.addEventListener('click', handleLinkClick);
    });
}

function handleLinkClick(e) {
    let isFirstClick = true;
    const isMobile = window.innerWidth < 768 || 'ontouchstart' in window;
    
    if (isMobile) {
        if (isFirstClick) {
            e.preventDefault();
            this.closest('.newsflash-title').classList.toggle('is-active');
            isFirstClick = false;
        } else {
            isFirstClick = true;
        }
    }
}

// 页面加载和窗口 resize 时初始化
window.addEventListener('load', initMobileNewsLinkLogic);
window.addEventListener('resize', initMobileNewsLinkLogic);

内容的提问来源于stack exchange，提问作者Colette Admotion