CSS:

.sval:active, .sval:focus{

   background: #999;color:#fff;opacity：50;

}

在触屏上，:hover和:active也不是直接就起到作用的，这里要借助一个小小的hack，在html的body中（或者目标元素上）添加 ontouchstart="" ,来邪恶地诱使WebView监听touch事件。

HTML:

<body ontouchstart="">

或：javaScript:

<script  type="text/javascript">

//相应苹果手机触屏（:active:focus）

document.body.addEventListener('touchstart', function () {});

</script>

问题8：手机端实现点击按钮时更换颜色（解决IOS不显示背景）的更多相关文章

  1. [C# 基础知识系列]专题五：当点击按钮时触发Click事件背后发生的事情 （转载）

    当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑问的—— ...

  2. 常见问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。

    例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...

  3. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  4. 去掉firefox点击按钮时的虚线边框

    去掉火狐里面点击按钮时候的虚线边框 button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[t ...

  5. chrome 获得点击按钮时的事件

    初次了解浏览器高级点的功能,原来这么强 想了解点击一个网页的按钮时触发了什么事件,firefox chrome确实很强大,基本可以监控所有内容 以chrome为例: 在按钮上 右键检查 或者 F12  ...

  6. dede手机端首页点击文章内容、列表，却跳到pc端

    手机访问到手机端首页,点击列表.内容.图片等都跳到pc端,是什么原因? 查看m模板里面的index.html文件生成的代码是绝对路径(数字随机)13.html 而不是view.php?aid=13 解 ...

  7. 手机端H5点击类目自动定位到相应内容

    _obj = {}; /*点击弹出分类*/_obj.openZZ=function(){ document.getElementById("app_screen01").style ...

  8. html5手机端的点击弹出侧边滑动菜单代码

    效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/ ...

  9. 手机端上点击input框软键盘出现时把input框不被覆盖，显示在屏幕中间（转）

    转载地址:https://www.cnblogs.com/xzzzys/p/7526761.html 1  用定位为题来解决var oHeight = $(document).height(); // ...

随机推荐

  1. react native初始化项目

    打开命令行窗口,进入我们想要创建项目的父目录,输入命令: npm install -g yarn react-native-cli react-native init 项目名 进入新建的项目目录,执行 ...

  2. 基于jquery的页面分屏切换模板

    闲来无事,搞了个页面的分屏效果,先来看下效果: 出于可自定义宽高的目的,屏幕分块由CSS控制,由js控制估计等分模块效果一般. 程序相关说明: HTML结构: <div class=" ...

  3. XNginx - nginx 集群可视化管理工具

    之前团队的nginx管理,都是运维同学每次去修改配置文件,然后重启,非常不方便,一直想找一个可以方便管理nginx集群的工具,翻遍web,未寻到可用之物,于是自己设计开发了一个. 效果预览 集群gro ...

  4. Windows10系统网络连接问题

    Thinkpad笔记本Windows10系统突然遇到网络连接问题: 问题:今天同事遇到一个WiFi连接问题,ThinkPad笔记本在公司和家里面都无法连接WiFi 寻找问题: 1.检查硬件问题 首先我 ...

  5. Codeforces 1073C Vasya and Robot 【二分】

    <题目链接> 题目大意: 一个机器人从(0,0)出发,输入一段指令字符串,和机器人需要在指定步数后到达的终点,问如果机器人需要在指定步数内到达终点,那么需要对原指令字符串做出怎样的改变,假 ...

  6. uni-app — 一套前端开发跨平台应用的终极解决方案

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 今天有空就来介绍一下uni-app这个能够跨平台开发, ...

  7. 使用vue iview遇到的一些问题

    使用阿里巴巴图标库 下载代码 这五个文件 iconfount.css 如果导入多个文件记得把@font-face复制到里面 改成./路径 //main.js import './assets/font ...

  8. How to check for null/empty/whitespace values with a single test?

    SELECT column_name FROM table_name WHERE TRIM(column_name) IS NULL

  9. 2153 ACM 仙人球的残影 输出格式

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2153 中文题目,很简单,但是要注意输出格式,题目中三个字符长度 输出格式:%3d (整数) 思路:将输出看 ...

  10. SpringIOC和DI

    1.Spring的概念 Spring的绿草丛(一) Spring轻量级框架, Java EE的春天,当前主流框架目标使现有技术更加易用,推进编码最佳实践内容IoC容器AOP实现数据访问支持简化JDBC ...