微信小程序中,可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意,大部分组件是不支持该属性的。

目前支持 hover-class 属性的组件有三个:view、button、navigator。

不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。

使用方法:

  <view hover-class="bg_red">这是一段文字</view>

  .light_blue{

    background: bg_red; // 这里可以写任何你想要的样式  

  }

  当 hover-class 的值为 none 时,组件上不会有任何点击态效果。

注意事项1:

  当组件中没有任何指定的类时,直接使用 hover-class 就会起到相应的作用,但是当组件中已经指定了其他可能与 hover-class 冲突的类时,hover-class 无效。

解决办法:

  将 hover-class 指定的类放在对应 wss 文件的最末尾,这样就不会被其他类所覆盖。

注意事项2:

  通常,当一个 view 组件中包含 image 等不支持 hover-class 的组件,但又需要在该组件上使用 hover-stop-propagation 属性的作用时,需要将不支持 hover-class 的组件用view、button 或 navigator 包裹起来。

微信小程序中的 hover-class的更多相关文章

  1. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  2. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  3. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  4. 微信小程序中placeholder的样式

    通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...

  5. 微信小程序中转义字符的处理

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...

  6. 微信小程序中用户登录和登录态维护

    提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...

  7. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  8. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

  9. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  10. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

随机推荐

  1. November 25th 2016 Week 48th Friday

    People will fall for its appearance while driving passionately. 观者倾心,驭者动魄. This is an advertisement ...

  2. Take my breath away

    Take my breath away 编辑 目录 1简介 2翻唱简介 3歌词 ▪ 英文歌词 ▪ 中英文歌词 1简介编辑 <Take My Breath Away>(中文译为<带走我 ...

  3. SDN 第一次上机作业

    第一题 拓扑: 测试连通性: 第二题 拓扑: 测试连通性: 第三题 拓扑: 测试连通性:

  4. python3编程的一些实用技巧1

    1.choice函数:返回一个列表,元组,字符串的随机项   :   调用时应导入random模块,如from random import choice 2.print 两个字符串, 逗号,+号进行连 ...

  5. 【洛谷】【线段树】P1471 方差

    [题目背景:] 滚粗了的HansBug在收拾旧数学书,然而他发现了什么奇妙的东西. [题目描述:] 蒟蒻HansBug在一本数学书里面发现了一个神奇的数列,包含N个实数.他想算算这个数列的平均数和方差 ...

  6. Day10 上传和下载

    上传 将本地文件传输到服务器 jsp:  文件上传的请求方式必须是post  input的type必须是file  enctype="multipart/form-data" ...

  7. docker 导入导出镜像

    docker容器导入导出有两种方法: 一种是使用save和load命令 使用例子如下: docker save ubuntu:load>/root/ubuntu.tar docker load& ...

  8. js中使用trim

    function trim(s) { return trimRight(trimLeft(s)); } //去掉左边的空白 function trimLeft(s) { if (s == null) ...

  9. node.js 连接 sql server 包括低版本的sqlserver 2000

    利用tedious连接,github地址:https://github.com/tediousjs/tedious 废话不多时直接上代码. connection.js var Connection = ...

  10. Docker实战(一)之使用Docker镜像

    镜像是Docker三大核心概念中最为重要的,自Docker诞生之日起“镜像”就是相关社区最为热门的关键字. Docker运行容器前需要本地存在对应的镜像,如果镜像没有保存至本地,Docker会尝试先从 ...