添加伪类后js事件失效

关于伪类after后续追加，实现js事件（如点击事件）

实现情况为:点击"编辑"后,"编辑"文字变成"完成",再点击伪类元素后的"完成",此时的"完成"应该变成"编辑" 情况描述为:如果用伪类实现,点击"编辑"后变成"完成",再点击"完成",无反应原因排查为:原"编辑"和后"完成"是同一个span,只是不同类名,但后续动态追加的类名,无法实现

今日试了一下button添加伪类元素,结果是不行的前后都叠加在一起 html代码: <button class="form_btn" formType="submit">开始择日</button> css样式: .form_btn::before{ content: ""; position: absolute; top:0; background:yellow; width:14px; height: 38px; bac

用:hover伪类代替js的hover事件

制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(function(){ $("sub-nav").addClass("show"); }, function(){ $("sub-nav").removeClass("show"); }); 第一个function实现鼠标移上去的样式,

我是如何通过debug成功甩锅浏览器的：解决fixed定位元素，在页面滚动后touch事件失效问题

如果你关注我应该知道,我最近对PC端页面进行移动适配.在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart 事件替代传统的 click 事件,这过程中我遇到了一些小问题,并成功解决了,你可以通过这篇文章查看具体的情况. 所谓祸不单行,在即将发布上线的时候,我又突然发现使用 touchstart 事件后,移动设备上出现了另一个比较诡异的现象:当用户滚动页面后,原本绑定在fixed定位的navbar元素上的

CSS中伪类及伪元素用法详解

CSS中伪类及伪元素用法详解伪类的分类及作用: 注:该表引自W3School教程伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: 伪元素和伪类的区别从作用也可以看出伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象.例如文档语言不能提供访问元素内容第一字或者第一行的机制.伪元素允许设计师引用它们,否则这是难以办到的.伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例

Css3动态伪类

通常我们可以用CSS中伪类和js中的鼠标事件来定义. 动态伪类起作用的元素描述 :link 只有链接未访问的链接 :visited 只有链接访问过的链接 :hover 所有元素鼠标经过元素 :active 所有元素鼠标点击元素 :focus 所有可被选中的元素元素被选中

css伪类及伪元素用法

注:该表引自W3School教程伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active 大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.:focus这几种常用伪类写法一致,下面就不再赘述.为了直

IMG标签与before,after伪类

在CSS中总有一些你不用不知道,用到才知道的“坑”.比如今天要谈的,把 before, after 伪类用在 <img> 标签上.嗯,实际上你用你会发现,在大多数浏览器这是无效的,dom中并不会出现你想要的结果.为什么会这样呢?让我们回归到 W3C 标准中寻觅一下,在标准中,before, after 伪类的定义如: As their names indicate, the :before and :after pseudo-elements specify the location of c

img标签的before,after伪类

在CSS中总有一些你不用不知道,用到才知道的“坑”.比如今天要谈的,把 before, after 伪类用在 <img> 标签上.嗯,实际上你用你会发现,在大多数浏览器这是无效的,dom中并不会出现你想要的结果.为什么会这样呢?让我们回归到 W3C 标准中寻觅一下,在标准中,before, after 伪类的定义如: As their names indicate, the :before and :after pseudo-elements specify the location of c

【javascript/css】关于鼠标事件onmousexxx和css伪类hover

在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover". 在实际运用中如何选择,取决于清楚明白的了解他们之间的区别. HTML DOM 允许 JavaScript 对 HTML 事件作出反应. 在我们为元素绑定了一个事件,当事件发生的时候,可以执行一段javascript代码. 关于鼠标事件,总共有: onmouseover和onmouseout 鼠

js事件,操作页面文档,计算后样式,数据类型

js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="red"">文本内容</div> <style> div{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <d

利用伪类选择器与better-scroll的on事件所完成的上拉加载

之前给大家分享过一篇上拉加载利用了better-scroll的pullUpDown 和DOM元素的删除添加感觉那样不太好今天给大家分享一个不同的上拉加载思想代码如下 class List { constructor(opj) { this.page = opj.page;//第几页数据 this.list = opj.list;//多少条数据 this.el = opj.el; //添加better-scroll的元素 this.listDom = document.querySele

伪多线程类threading.js

前言: 虽然html5中已经提供Worker对象进行多线程的支持,可该对象在某些场合还是无法满足需求——因为它难以操作DOM元素. 而某些情况下,进行大量的js计算以及DOM元素调用的情况下,会出现脚本执行时间过长,被浏览器强制中断的情况. 顾本人整合了该多线程伪类,分享给各位. 正文: 1.设计思路方法模块化,一个大的需要长时间执行的进程切分成多个小进程,添加入执行队列中,由该队列进行管理,执行这些方法. 2.源代码 /* 伪线程类 author: JeremyWang */ functio

【CSS-进阶之元素：focus伪类模拟点击事件】

先放上我们最终实现的效果注:这里建议插入codepen(临时使用图片代替) 我们想要实现当点击某个元素时,显示一个tip浮动框. html: <div class="wrapper"> <span class="click-ele">我是按钮</span> <div class="popup">我是文字测试君</div> </div> 通常我们会采用JS的方法给触发事件元素

微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效

在做移动端页面的时候,会发现PC上那种:hover的效果是不管用了的,但又要给用户一个点击反馈怎么办呢?我管它叫触觉反馈. 细心点就会发现浏览器有自带了一点触觉反馈,在点击a.button.input的时候都会出现,像这样: 应该有见过的吧..这个应该是浏览器的默认样式,有时候是想要这样的,可以加样式解决,比如: a,button,input{-webkit-tap-highlight-color:rgba(255,255,255,0);} 其实就是把a.button.input这些标签的系统触

css伪类的说明以及使用(css事件)

CSS伪类的使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html 之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的,然后我若无其事的说了句:用CSS事件啊...╮(￣▽￣)╭,然后同事不解的回到座位后在代码中狂找...

js动态改变css伪类样式

首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').click(function(){ var index = $(this).index(); var offset = 11; // 左侧偏移 11像素 var imgWidth = 240; // 图片的宽度是240 var pos = 0; // 因此第一个tab项的居中位置就是 240/2 + 1

巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其

JS事件冒泡机制和兼容性添加事件

本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body><div></div></body> ,我们会先找到 body,然后下一个才是 div.就像中央领导发布政策一样. 从上往下通知. 目标阶段就是找到目标的那段时间,这个我们暂且不谈. 冒泡阶段就是从子层往外层传.比如 <body><div><

IOS 伪类:active失效

IOS中不兼容:active伪类,所以在状态控制上就会有问题,解决办法是,添加一个空的点击事件: 移动端添加:ontouchstart <a class="m-btn" ontouchstart=""></a> PC端添加:onmouseover <a class="m-btn" onmouseover=""></a> OK了~