FireFox响应式设计设备模式下hover效果失效该如何处理？

问题原因 #

Firefox响应式设备模拟模式默认启用纯触摸设备模拟，触摸设备本身不存在鼠标hover交互逻辑，因此:hover伪类不会触发；Chrome的设备模拟默认同时兼容鼠标hover和触摸事件，所以不会出现失效问题。

解决方案 #

临时测试场景解决方法 #

打开Firefox响应式设计模式的控制栏，点击「手指形状」的模拟触摸事件按钮，关闭触摸模拟后即可正常触发hover效果。

如果需要默认关闭响应式模式的触摸模拟，可按以下步骤操作：

• 地址栏输入about:config进入配置页，接受风险提示
• 搜索配置项devtools.responsive.touchSimulation.enabled，将值修改为false即可

兼顾实际移动端触摸场景的代码适配 #

如果需要让该效果在真实移动设备上也能通过点击触发，可修改代码适配触摸交互：

1. 调整CSS选择器，新增:active、:focus伪类适配：

.campaigns-container:hover .overlay,
.campaigns-container:active .overlay,
.campaigns-container:focus .overlay {
    opacity: 0.9;
}

2. 给mat-card元素新增tabindex属性，让元素可获得焦点，适配focus触发逻辑：

<mat-card class="campaigns-container" tabindex="0">
<!-- 其余原有内容保持不变 -->
</mat-card>

3. 可选：给容器元素添加touch-action: manipulation属性，避免浏览器默认触摸行为拦截自定义交互：

.campaigns-container {
    touch-action: manipulation;
}

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