微信小程序按钮点击时的样式hover-class=“hover“

小程序的button组件很好用,按钮点击的时候会显示点击状态,默认的就是颜色加深

但是我们改变了button的背景色之后,就看不出点击效果了,解决起来也很简单

关键代码就是小程序的 hover-class 属性,需要注意的是,hover-class 的属性中的样式必须加 !important 不然没有不显示效果

产生该问题的原因为:在css中,内联样式 style的优先级要高于class选择器的优先级,所以在我们添加style标签后即使添加hover-class选择器也会被内联样式style所覆盖,导致hover-class选择器失效,无法实现点击按钮后的效果。

 <button hover-class="hover">我要投票</button>
.voteText .hover{
  background-color: #bb241c !important;
  color: #f2f2f2 !important;
}

改完可以看到按钮点击的时候颜色变成了我们设置的颜色

相关推荐

  1. uniapp程序保存图片

    2024-04-26 15:08:07       46 阅读
  2. 程序修改checkbox和radio样式

    2024-04-26 15:08:07       22 阅读

最近更新

  1. 使用ADB命令控制logcat日志本地存储功能

    2024-04-26 15:08:07       0 阅读
  2. matlab实现pid控制空调温度

    2024-04-26 15:08:07       0 阅读
  3. 深入浅出Transformer:大语言模型的核心技术

    2024-04-26 15:08:07       0 阅读
  4. NLP - Softmax与层次Softmax对比

    2024-04-26 15:08:07       1 阅读
  5. Rust 启航:为何选择 Rust 及其核心价值

    2024-04-26 15:08:07       1 阅读
  6. 安装Go语言常用工具

    2024-04-26 15:08:07       1 阅读

热门阅读

  1. Reactjs数据篇

    2024-04-26 15:08:07       13 阅读
  2. ubuntu创建新用户,添加用户权限,删除用户

    2024-04-26 15:08:07       16 阅读
  3. 修改k8s kube-proxy转发为ipvs

    2024-04-26 15:08:07       48 阅读
  4. CLion的详细介绍

    2024-04-26 15:08:07       55 阅读
  5. 20240425-线程基础-线程的使用(一)

    2024-04-26 15:08:07       16 阅读
  6. 使用脚本定时备份MySql数据库文件

    2024-04-26 15:08:07       38 阅读
  7. 深入理解汇编中的ZF、OF、SF标志位和条件跳转

    2024-04-26 15:08:07       19 阅读