做外贸必应网站产品曝光百度推广后台登陆入口
目录
一、什么是 hover-class
二、常用组件支持 hover-class
三、基本
效果说明：
四、配合 hover-start-time 和 hover-stay-time
五、注意事项
六、实践建议
在移动端开发中，良好的用户交互体验尤为重要，点击或长按某个按钮时，给予用户视觉反馈是常见的做法。uni-app 提供了 hover-class 属性，可以非常方便地实现这一效果。
一、什么是 hover-class
hover-class 是 uni-app 中组件的一个属性，用于指定当用户按下并保持触摸某个组件时，组件应该添加的 CSS 类名。通过这个类名，我们可以设置触摸时的样式，比如背景色变化、边框加粗等。
二、常用组件支持 hover-class
以下组件原生支持 hover-class：
-
<view> -
<button> -
<navigator> -
<cover-view> -
<movable-view>
三、基本
<view class="btn" hover-class="btn-hover">点击我
</view>
CSS 样式：
<style>
.btn {background-color: #007AFF;color: white;padding: 10px 20px;border-radius: 5px;text-align: center;
}
.btn-hover {background-color: #005BBB;
}
</style>
效果说明：
-
正常状态下，按钮是蓝色；
-
按住（touch）按钮时，会变成深蓝色；
-
松开后恢复原样。
四、配合 hover-start-time 和 hover-stay-time
除了指定类名外，还可以配合以下两个属性控制响应时间：
| 属性名 | 说明 | 默认值 |
|---|---|---|
hover-start-time | 手指按下到产生 hover 状态所需的时间（ms） | 50 |
hover-stay-time | 手指松开后 hover 状态保留时间（ms） | 400 |
示例：
<viewclass="btn"hover-class="btn-hover"hover-start-time="0"hover-stay-time="200"
>快速反馈按钮
</view>
五、注意事项
-
只有在真机中才能完全体现 hover 效果，H5 和小程序开发工具可能表现不同；
-
如果组件本身是不可点击（如
disabled的按钮），则hover-class不会生效； -
hover-class="none"可以禁止触摸样式，适用于某些不需要反馈的场景。
六、实践建议
-
推荐为交互性强的元素都添加
hover-class； -
样式尽量不要跳变太剧烈，建议轻微变色或阴影增强；
-
可结合动画类名进行更多扩展（如使用
transition）。
希望这篇文章能帮助你更好地理解和使用 hover-class，提升你的 uni-app 项目交互体验！