小程序之hover-class
hover-class 属性主要是用来来指定元素的点击态效果。但是在在使用中要注意,大部分组件是不支持该属性的。
目前支持 hover-class 属性的组件有三个:view、button、navigator。
不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。
hover-class的使用语法:
<view clasd=" " hover-class=“类名” ></view>
.类名{
点击后的样式
}
注意事项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的更多相关文章
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 微信小程序t填坑之旅一(接入)
一.小程序简介 小程序是什么? 首先"程序"这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为 ...
- 官方问答--微信小程序常见FAQ (17.8.21-17.8.27)
给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Andro ...
- 探秘小程序(7):view组件
小程序中最基础,最常用的组件--view,类似于html中div的存在有四个属性: ①hover-class:指定按下去的样式类.当 hover-class="none" 时,没有 ...
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序自学过程中遇到的问题 转
view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下: < view class=" ...
- css - 小程序样式
/* * @Author: WJ_LONG * @Date: 2018-09-15 17:25:37 * @Last Modified by: WJ_LONG * @Last Modified tim ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 微信小程序初级教程
小程序代码构成 JSON 配置 WXML 模版 WXSS 样式 JS 逻辑交互 JSON 配置 在小程序中,JSON扮演的静态配置的角色. 小程序配置 app.json { "pages&q ...
- 前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...
随机推荐
- 在Postman中使用不受信任的SSL证书
阅读目录 第一种方案——临时添加到受信任的证书颁发机构: 第二种方案——永久添加到受信任的证书颁发机构: add by zhj: 在http://www.cnblogs.com/ajianbeyour ...
- CentOS 中安装和卸载 Emacs
日志更新记录: [1] 增加 CentOS7.2 (内核版本:3.10.0-514.16.1.el7.x86_64)下Emacs25.2 的安装过程,它与本文的步骤完全一样. Emacs 版本:htt ...
- PDF 补丁丁 0.6.1.3498 版重大更新:为文本PDF文档自动生成书签!
新的 PDF 补丁丁开放了内部测试了很久的好用功能——自动书签. 这个功能可以在一分钟内快速生成文本型 PDF 文档的书签(说明:本功能分析文档中的文本,生成标题,故对扫描版的 PDF 文档无效). ...
- Spring Boot:Web 综合开发
Web 开发 Spring Boot Web 开发非常的简单,其中包括常用的 json 输出.filters.property.log 等 json 接口开发 在以前使用 Spring 开发项目,需要 ...
- 微信内嵌浏览器打开手机浏览器下载APP(APK)的方法
想必大家会经常碰到网页链接在微信内无法打开和微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下四点 1.网页链接被举报次数 ...
- 初识HT for web
目前国内经济转型在潜移默化中已经发生了巨大的变化,保险,零售业,汽车等我能想到的. 只要互联网能插足的行业,都难逃一‘劫’. 刚看了一篇博客--基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化 ...
- conda的使用(附带远程文件传输命令)
1 环境管理 1.1查看当前系统下的环境 conda info -e 创建新的环境 # 指定python版本为3.6,注意至少需要指定python版本或者要安装的包 conda create -n m ...
- 【翻译】Open ID Connect---OIDC 是什么东西?
Welcome to OpenID Connect What is OpenID Connect? OpenID Connect 1.0 is a simple identity layer on t ...
- OSI,TCP/IP,五层协议的体系结构,以及各层协议
OSI分层 (7层):物理层.数据链路层.网络层.传输层.会话层.表示层.应用层. TCP/IP分层(4层):网络接口层. 网际层.运输层. 应用层. 五层协议 (5层):物理层.数据链路层.网络层. ...
- Android 面试100问- 0序0
准备找android方面的工作,现收集面试题,打算收集100个并记录