如何针对非触屏设备条件性应用CSS :hover伪类样式？

核心解决方案：使用hover: hover媒体查询 #

你之前用的any-pointer: fine会匹配同时拥有鼠标和触屏的设备（比如带触屏的笔记本），导致触屏操作依然会触发hover样式残留。改用@media (hover: hover)可以精准识别仅支持原生鼠标悬停的设备，彻底避免触屏设备的模拟hover问题。

修改后的完整代码 #

HTML部分（仅调整卡片元素） #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Browse Trees</title>
</head>

<body>
    <div style="width: 100%; display: flex; justify-content: center;">
        <div style="display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; width: 70%; height: 80%; flex-grow: 0;">
            {%for tree in trees%}
            <!-- 添加tabindex让键盘可访问，配合焦点样式 -->
            <div class="tree" onclick="window.location=('/tree/{{tree.id}}')" tabindex="0">
                <img src="{{url_for('static', filename='260-150x150.jpg')}}" alt="Avatar" style="width:100%">
                <div class="container">
                    <h4><b>{{tree.latinName}}</b></h4>
                    <p>{{tree.organization}}</p>
                </div>
            </div>
            {%endfor%}
        </div>
    </div>
</body>
</html>

CSS部分 #

.tree {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px;
    max-height: max-content;
    max-width: max-content;
    margin: 12px;
    /* 移除默认焦点框，改用自定义样式 */
    outline: none;
}

/* 仅在支持原生hover的设备上应用悬停/焦点样式 */
@media (hover: hover) {
    .tree:hover,
    .tree:focus-visible {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        transform: scale(1.1, 1.1);
    }
}

.container {
    padding: 2px 16px;
    height: 150px;
    width: 100px;
}

img {
    border-radius: 5px 5px 0 0;
    max-width: 260px;
    max-height: 260px;
}

关键说明 #

1. hover: hover的作用：这个媒体查询只在设备支持真正的悬停交互时生效（比如鼠标、触控板），触屏设备不满足该条件，因此不会加载hover样式。
2. 添加tabindex的原因：让卡片支持键盘导航，配合:focus-visible确保键盘用户也能看到交互反馈，提升页面可访问性。
3. 为什么之前的方案失效：
   • pointer: coarse/any-pointer: coarse是检测是否存在触屏，但无法区分"仅触屏"和"触屏+鼠标"的设备，逻辑方向错误。
   • 结合:active/:focus无法解决触屏hover残留，因为触屏触摸结束后浏览器会保留hover状态，直到下一次触摸操作。

内容的提问来源于stack exchange，提问作者Nikolai Savulkin