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

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

交互

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

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

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

Hover效果鼠标交互

我来解答赞 1 收藏

反馈

1 条解答

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