Hover效果在移动端不生效怎么办？

令狐梓童提问于 2026-03-05 20:58:19 阅读 114

交互

我给按钮加了 hover 样式，在电脑上鼠标移上去没问题，但在手机上点按完全没反应，试过加 :active 也不行。

是不是移动端根本不支持 hover？那该怎么实现类似的效果？比如点一下变色那种。

.btn {
  background: #ccc;
}
.btn:hover {
  background: #007bff;
}

Hover效果鼠标交互

我来解答赞 2 收藏

反馈

2 条解答

欧阳嘉兴 Lv1

移动端确实不支持hover，用touch事件模拟就行。试试这样：

.btn {

  background: #ccc;

}

.btn:hover, .btn:active, .btn:focus {

  background: #007bff;

}

再加个JS处理touch事件更保险：

document.querySelectorAll('.btn').forEach(btn => {

  btn.addEventListener('touchstart', () => {

    btn.classList.add('active');

  });

});

2026-03-07 17:16

Good“皓阳 Lv1

移动端确实不认hover，省事的话直接加个:active和:focus一起用：

.btn {

  background: #ccc;

}

.btn:hover,

.btn:active,

.btn:focus {

  background: #007bff;

}

再不行就加个touch事件js，但能不用js就别用，css能搞定的事绝不写代码。

2026-03-05 21:00