手机端css实现active伪类

今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可。

例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin:0; padding:0; }
.domain a{ display:inline-block; border:1px solid #ccc; padding:5px 10px; margin:10px; }
.domain a:active{ background-color:#c00; color:#fff; }
</style>
</head>
<body>
<div class="domain" id="js-domain">
<a href="#">点击1</a>
<a href="#">点击2</a>
</div>

<script>
window.onload = function(){
var doma=document.getElementById("js-domain").getElementsByTagName(‘a‘);
for(var i=0;i<doma.length;i++){
doma[i].addEventListener(‘touchstart‘,function(){},false);
};
}
</script>

</body>
</html>

时间: 2024-07-29 17:33:08

手机端css实现active伪类的相关文章

iOS Web开发激活css的active伪类

最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效,只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功. 下面简单以一个文本作为例子: <!DOCTYPE html> <html> <head> <style> p { color: yellow; } p:active { co

移动端:active伪类无效的解决方法

:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等.在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键. 该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示.使用键盘的tab键也可以触发:active状态. 说到:active伪类就不得不提到:link,:visited,:hover,:active这

css中的伪类

1.伪类的语法 selector:pseudo-class {property:value;} 对应的中文:选择器:伪类{属性:值:} 2.anchor伪类 1 <style type="text/css"> 2 /*anchor伪类的顺序是固定的,不变的*/ 3 /*未访问时的样式*/ 4 a:link{color: black;} 5 /*访问过后的样式*/ 6 a:visited{color: pink;} 7 /*鼠标划过时的样式*/ 8 a:hover{color

CSS中的伪类和伪元素

伪类 伪类与类相似,但又没有类附加标签上.伪类分为UI伪类和结构化伪类. UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的元素上) :active(将样式添加到被激活的元素上) :focus(将样式添加到被选中的元素上) 结构化伪类 :first-child(将样式添加到第一个子元素上) :last-child(将样式添加到最后一个子元素上) 伪元素 伪元素是在文档中若有实无的元素. 主要有以下几种 :fir

css选择器2——伪类选择器

一.伪元素选择器 1. E:first-letter/E::first-letter(css3时代两个冒号) 设置元素内的第一个字符的样式. 例如: p::first-letter{font-size:50px;} 2. E:first-line/E::first-line 设置元素内的第一行的样式. 例如: p::first-line{color:green;} 3. E:before/E::before在每个E元素的内容之前插入内容.用来和content属性一起使用. 例如: a::befo

CSS选择器:伪类(图文详解)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". 静态伪类和动态伪类 伪类选择器分为两种. (1)静态伪类:只能用于超链接的

css(二)css选择器,伪类

前戏 前面我们说过CSS规则由选择器和声明组成,我们要给标签设置属性,那我们就要找到对应的标签,CSS选择器可以帮我们找到我们需要的标签 css选择器有: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器 标签选择器 标签选择器前面我们用过,它是以HTML标签作为选择器 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type&qu

HTML表单及CSS选择器、伪类和伪元素

一.input标签 1.<input>实现按钮效果 -与表单相关的按钮效果 -<input type="button" value="按钮"> 2.<button>标签表示按钮 -与表单无关的按钮效果:<button>按钮</button> -类似于<input type="submit"> - 提交表单 3.<input type="image"&

CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. 大多数都是非替换元素.span中的内容由用户代理. 4.元素间的父子与祖先 如果一个元素在另外一个元素的直接上一层,他们就有父子关系 如果是从一个元素到另外一个元素的路径要经过两层或多层,那这个就是祖先与后代的关系 5.animate的动画叠加解决办法 使用的时候在animate前面放上stop 6