程序员经验分享-hwhale

解决微信小程序button的hover-class不生效问题

2023-11-15

在小程序开发过程中我们会遇到button添加style样式后即使添加hover-class样式也没有点击效果的问题。

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

解决办法：还记得css中important优先级最高吗？只需要在wxss中的hover-class指定的class中每一条属性后添加“!important”即可，如：

.button-hover{
    background-color: #e8e8e8!important;
}

此时再去编译一下，会发现hover-class设置的样式在按钮点击后可以生效了！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序

小程序

css

解决微信小程序button的hover-class不生效问题 的相关文章

  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code

  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi

  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是

  • 使用纯 CSS 创建向上和向下箭头图标或按钮

    我正在尝试使用纯 CSS 且无背景图像创建如下所示的 向上和向下 控制按钮 但是当我在 中添加箭头的CSS时li className after or li className before 主盒子的位置移动了 这是我遇到的问题的小提琴 g

  • 重新创建 CSS3 过渡三次贝塞尔曲线

    在 CSS3 过渡中 您可以将计时函数指定为 cubic bezier 0 25 0 3 0 8 1 0 在该字符串中 您仅指定曲线上点 P1 和 P2 的 XY 因为 P0 和 P3 始终分别为 0 0 0 0 和 1 0 1 0 根据苹

  • 从字体到跨度（大小和颜色）和背面的正则表达式（VB.NET）

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font

  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her

  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像

  • 为什么网格项目不居中？

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL

  • 如何设置 CSS 网格的最大高度

    我有以下 CSS 网格 grid 3x4 display grid grid template columns 1fr 1fr 1fr grid template rows 1fr 1fr 1fr 1fr grid template are

  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管

  • 将父容器扩展至 100% 高度以容纳浮动内容

    我正在为一个客户项目而苦苦挣扎 我的全部divs 没有绝对定位 height 100 for html body 和容器divs 但静态内容未达到其内容 在 910 像素处 我可以将溢出属性更改为auto 并且背景会继续向下到内容的末尾 但

  • 设置浏览器窗口最小化的最小尺寸限制？

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用

  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有

  • 为什么需要重置浏览器？

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认

  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些

  • 如何在背景剪辑中包含文本装饰：文本；影响？

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip

  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r

  • 为什么“tbody”不设置表格的背景颜色？

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro

  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • 二进制、八进制、十进制、十六进制之间的相互转换

    一 二进制 八进制 十六进制转换为十进制 方法 位权求和法 二进制用符号 B 表示 十进制用符号 D 表示 八进制用符号 O 表示 十六进制用符号 H 表示 100101 10111 B 1 2 5 0 2 4 0 2 3 1 2 2 0

  • OpenGL渲染字体的批处理操作

    一 问题描述 在OpenGL中 绘制字体通过纹理贴图的方式 一个场景中有200个单词 按照正常做法 一个单词生成一个贴图 指定Quad四个顶点纹理坐标 最后把数据传给OpenGL 进行绘制 OpenGL顶点数组是客户端 服务器模式 客户端是

  • 删除报错不能删除myeclipse或者eclipse项目方法

    当在myeclipse创建了项目 想删除的时候 发现删除不了 终极的解决方法如下 一 删除myeclipse或者eclipse上的java项目工程 1 找到对应myeclipse工作空间 使用强力删除 粉碎文件 删除成功 2 接着回到mye

  • Ubuntu下安装egg

    http blog csdn net flydirk article details 8506463 用easy install安装就可以了 安装之前需要python setuptools sudo apt get install pyth

  • 数字图像散斑计算Matlab连续处理1/2

    数字图像散斑计算Matlab连续处理 1 数字散斑相关测量法原理 2 打开 All m 文件 设置路径 3 运行程序 输入参考图像序号 4 框选高对比度区域 下图左图 双击以结束 结果后为下图右图 5 回到命令行 输入高对比度区域裁剪位置

  • RabbitMQ(二）confirm/return机制

    程序用了1 5 3 RELEASE版本的spring boot starter amqp依赖 confirm确认机制 配置文件

  • Python介绍

    Python由荷兰数学和计算机科学研究学会的吉多 范罗苏姆 于1990 年代初设计 作为一门叫做ABC语言的替代品 1 Python提供了高效的高级数据结构 还能简单有效地面向对象编程 Python语法和动态类型 以及解释型语言的本质 使它

  • prometheus的介绍&环境搭建配置服务启动监控

    一 prometheus的介绍 环境搭建配置 1 prometheus grafana构成 2 功能简介 Prometheus是一个开源监控系统 它前身是SoundCloud的警告工具包 主要具有如下功能 多维 数据模型 时序由 metri

  • 消息队列状态:struct msqid_ds

    Linux的消息队列 queue 实质上是一个链表 它有消息队列标识符 queue ID msgget创建一个新队列或打开一个存在的队列 msgsnd向队列末端添加一条新消息 msgrcv从队列中取消息 取消息是不一定遵循先进先出的 也可以

  • Mybatis学习

    mybatis面向接口编程 1 mybatis配置文件

  • 为什么pnpm比npm、yarn使用更好

    performant npm 意味高性能的 npm pnpm由 npm yarn 衍生而来 解决了 npm yarn 内部潜在的bug 极大的优化了性能 扩展了使用场景 被誉为 最先进的包管理工具 我们按照包管理工具的发展历史开始讲起 np

  • 转载--Windows下比较两个不同版本的二进制文件

    接手前人的软件 发现主程序依赖的动态库文件的源码没有包含在工程里面 花了好长时间找到了源代码 但是不知道它是不是最新版本的源代码 发现现有用到的动态库有两个版本的 其中一个修改时间旧一点的动态库文件在源代码的Release目录中可以找到 可

  • C# 自定义Label实现 指定字符串（关键词）高亮显示（字体、颜色）

    C 自定义Label实现 指定字符串 关键词 高亮显示 字体 颜色 原来是搞android的 本来自己就菜 现在由于项目需要开始着手弄C WPF 虽然了解一些 毕竟只是皮毛 唉 苦不堪言啊 还是得倚靠万能的互联网啊 需求 提示用户的文字 但

  • 机器学习--支持向量机(sklearn)

    机器学习 支持向量机 1 1 线性可分支持向量机 硬间隔支持向量机 训练数据集 T x 1 y 1 x 2 y 2 x N y N 当 y i 1 y i 1

  • Flutter页面不流畅，难道是使用姿势有问题？

    作者 檀婷婷 三莅 出品 阿里巴巴新零售淘系技术部 背景 高性能高流畅度一直是Flutter团队宣传的一大亮点 也是当初闲鱼选择Flutter的重要因素之一 但是随着复杂业务的应用落地 通过Flutter页面和原生页面滑动流畅度对比 我们开

  • 使用Azure Data Factory REST API和

    题解 给数组加一 class Solution public 代码中的类名 方法名 参数名已经指定 请勿修改 直接返回方法规定的值即可 题解 统计每种性别的人数 字符串子串函数的使用 substring index profile 1 SE

  • listView闪烁的问题

    用了一个ListView来实时的显示数据传输情况 于是问题就来了 当数据量比较大 而且处理速度很快时 这该死的界面闪得人眼花 废话不多说 直接上代码 首先 自定义一个类ListViewNF 继承自 System Windows Forms

  • stata 数据处理

    目录 按类别求均值 然后创建一个新的变量 缩尾处理 日期处理 连续变量处理成虚拟变量 按条件删除数据 按类别求均值 然后创建一个新的变量 bysort year industry egen meanvariable mean variabl

  • MySQL系列---事务与锁详解

    table of contents 1 背景 2 事务隔离级别 2 1 事务及其ACID属性 2 2 并发事务带来的问题 2 3 数据库事务隔离级别 3 锁机制 3 1 定义 3 2 分类 3 2 1 性能上划分 悲观乐观 3 2 2 从对

  • 解决微信小程序button的hover-class不生效问题

    在小程序开发过程中我们会遇到button添加style样式后即使添加hover class样式也没有点击效果的问题 产生该问题的原因为 在css中 内联样式style的优先级要高于class选择器的优先级 所以在我们添加style标签后即使

热门标签