如何在@media中使:hover伪类在移动端屏幕失效？

你提到的将:hover样式放在@media (min-width: 1050px)媒体查询中的方法是完全正确的，这是最直接且常用的实现方式——仅在指定宽度以上的桌面端应用hover样式，移动端自然不会触发该效果。

除此之外，还有以下几种可行的实现方式：

• 用媒体查询覆盖移动端hover样式
  保留全局的:hover样式，在移动端的媒体查询中重置hover状态的样式为初始值，适合不想大幅调整原有CSS结构的场景：

  .podcasts {
    font-size: 20px;
    font-family: sans-serif;
    color: #121723;
  }
  
  .podcasts:hover {
    color: #ff0000;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }
  
  /* 移动端重置hover样式 */
  @media (max-width: 1049px) {
    .podcasts:hover {
      color: #121723; /* 还原为初始文字颜色 */
      transition: none; /* 取消过渡效果，避免触摸后样式跳动 */
    }
  }
  

• 基于交互媒体特性精准判断
  使用CSS的(hover: hover)媒体特性，仅在支持精准鼠标hover的设备（如桌面端）应用hover样式，比单纯按屏幕宽度判断更贴合设备的交互特性：

  .podcasts {
    font-size: 20px;
    font-family: sans-serif;
    color: #121723;
  }
  
  @media (hover: hover) {
    .podcasts:hover {
      color: #ff0000;
      -webkit-transition: 0.4s;
      -o-transition: 0.4s;
      transition: 0.4s;
    }
  }
  

  这种方式的优势在于，即使是大屏平板，只要使用触摸操作就不会触发hover，判断逻辑更精准。

• JavaScript辅助控制
  如果需要更灵活的交互控制，可以通过JS检测设备是否支持触摸，从而移除或重置hover效果：

  // 检测是否为触摸设备
  if ('ontouchstart' in window) {
    document.querySelectorAll('.podcasts').forEach(el => {
      el.addEventListener('touchstart', function(e) {
        e.preventDefault(); // 阻止触摸时触发hover状态
        this.style.color = '#121723'; // 强制还原初始颜色
      });
    });
  }
  

  这种方式适合存在复杂交互逻辑的场景，但一般优先推荐CSS方案，保持样式与行为分离。

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