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的更多相关文章

  1. 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)

    最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...

  2. 微信小程序t填坑之旅一(接入)

    一.小程序简介 小程序是什么? 首先"程序"这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为 ...

  3. 官方问答--微信小程序常见FAQ (17.8.21-17.8.27)

    给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Andro ...

  4. 探秘小程序(7):view组件

    小程序中最基础,最常用的组件--view,类似于html中div的存在有四个属性: ①hover-class:指定按下去的样式类.当 hover-class="none" 时,没有 ...

  5. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 微信小程序自学过程中遇到的问题 转

    view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下:   < view class=" ...

  7. css - 小程序样式

    /* * @Author: WJ_LONG * @Date: 2018-09-15 17:25:37 * @Last Modified by: WJ_LONG * @Last Modified tim ...

  8. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  9. 微信小程序初级教程

    小程序代码构成 JSON 配置 WXML 模版 WXSS 样式 JS 逻辑交互 JSON 配置 在小程序中,JSON扮演的静态配置的角色. 小程序配置 app.json { "pages&q ...

  10. 前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR

    一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...

随机推荐

  1. python3安装docx模块出现Import Error: No module named 'exceptions'

    x首先 pip3 install docx 显示已经安装,但是 No module named 'exceptions' 网上查的资料命令行下载的docx安装包还没有完全兼容python3,第三方库应 ...

  2. mysql语句将日期转换为时间戳的方法

    mysql将日期转换为时间戳更新数据库: update test set creattime=UNIX_TIMESTAMP('2018-04-19') 替换字段为当前日期: update test s ...

  3. win10系统开机输入密码黑屏解决方法

    方法一: 第一步:首先打开笔记本电脑开机,输入开机密码进入 第二步:输入密码后显示黑屏,按"Ctrl+Alt+Del"组合键打开任务管理器 第三步:在打开的任务管理器中,点击&qu ...

  4. 页面中直接显示FTP中的图片

    页面中直接显示FTP中的图片 FTP根目录下有一张图片,如下 第一步: 通过如下格式,在浏览器上输入路径,确定可看到图片 ftp://root:root@127.0.0.1/111.png ftp:/ ...

  5. MySQL 必知必会学习笔记(常用命令二)

    CREATE TABLE students(student_id INT UNSIGNED, name VARCHAR(30), sex CHAR(1), birth DATE, PRIMARY KE ...

  6. 递归实现列出当前工程下所有.Java文件

    package com.lanxi.demo2_3; import java.io.File; import java.util.ArrayList; import java.util.List; / ...

  7. Git clone出现SSL certificate problem

    1 可以在cmd下,设置 git config --global http.sslVerify false git clone  XXX 即可. 2 TortoiseGit设置 打开TortoiseG ...

  8. 【命令】Ubuntu设置和查看环境变量

    转自[Ubuntu]Ubuntu设置和查看环境变量 查看环境变量 env env命令是environment的缩写,用于列出所有的环境变量 export 单独使用export命令也可以像env列出所有 ...

  9. ecplise包的层次结构选择

    ecplise包的层次结构选择 平坦方式: 分层方式:

  10. Java中Json字符串转换为对象的方法(多层List集合)

    借鉴自:http://www.jb51.net/article/91142.htm 在将json字符串转换成对象flightInfo时,当flightInfo对象中有List<flightCla ...