自己查资料总结的两种方法

一、纯css改变

　　a:hover:before{left:-20%;}
　　a:hover:after{right:-20%;}
　　a:before{  left:-100%; }
　　a:after{  right:-100%;  }
利用元素名:hover:before{改变的样式内容}，当鼠标移到该元素上时，伪元素的样式进行改变，hover和before之间一定不能有空格，这里连写在一起是代表并，and的意思，在css中没有and关键词，
用连写方式代替，例如：not(:first-child)表示非第一个子元素。
这个方法不会动态增加代码量，但是只能鼠标悬浮事件，
点击事件能用：target,但是这个属性的兼容性不好
：target定义和用法

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

       body,div,p,a{margin: 0;padding: 0;}

        body{background: #00AA88}

        div{

            /*外面框框的div样式*/

            width: 200px;

            position: relative;

            overflow: hidden;

            height: 150px;

        }

        a{ display: inline-block; }

       a:before,a:after{

           /*动态加载的元素*/

            content:"";

            display: inline-block;

            position: absolute;

            width: 70%;

            height:100%;

            transform: skewX(20deg);

            background: #fff;

            opacity: 0.3;

           transition: all .3s linear;

           top:0;

        }

       p{

           /*里面框的样式*/

           background: #003eff;

           display: inline-block;

            width: 200px;

           height: 150px;

        }

        a:hover:before{left:-20%;}

        a:hover:after{right:-20%;}

        a:before{  left:-100%; }

        a:after{  right:-100%;  }

    </style>

</head>

<body>

    <div id="d1" class="w">

        <a id="i" href="#" class="a1">

           <p></p>

        </a>

    </div>


二、用js改变样式


$('<style> a:before{left:-100%;} a:after{right:-100%;} </style>').appendTo('head')
这个方法可以用于用于任何事件，但是有个不好的地方，会在head上面一直增加代码







<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

       body,div,p,a{margin: 0;padding: 0;}

        body{background: #00AA88}

        div{

            /*外面框框的div样式*/

            width: 200px;

            position: relative;

            overflow: hidden;

            height: 150px;

        }

        a{ display: inline-block; }

       a:before,a:after{

           /*动态加载的元素*/

            content:"";

            display: inline-block;

            position: absolute;

            width: 70%;

            height:100%;

            transform: skewX(20deg);

            background: #fff;

            opacity: 0.3;

           transition: all .3s linear;

           top:0;

        }

       p{

           /*里面框的样式*/

           background: #003eff;

           display: inline-block;

            width: 200px;

           height: 150px;

        }

        /*a:hover:before{left:-20%;}*/

        /*a:hover:after{right:-20%;}*/

        a:before{  left:-100%; }

        a:after{  right:-100%;  }

    </style>

</head>

<body>

    <div id="d1" class="w">

        <a id="i" href="#" class="a1">

           <p></p>

        </a>

    </div>

    <script src="js/jquery-1.11.3.js"></script>

    <script>

           var b=$("a:before");

            var a=$("#i");

            a.hover(function () {

                $('<style>a:before{left:-20%;} a:after{right:-20%;} </style>').appendTo('head')

            },function () {

                $('<style> a:before{  left:-100%; } a:after{  right:-100%;  } </style>').appendTo('head')

            })

    </script>

</body>

</html>






 
												


											
动态改变伪元素样式的方(用:after和:before生成的元素)的更多相关文章
	

    
								
  1. js动态改变css伪类样式
		
    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
    
		
    2. 
						
  2. jQuery如何改变css伪元素样式
		
    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
    
		
    3. 
						
  3. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试
		
    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...
    
		
    4. 
						
  4. Windows Phone 动态改变ListBox样式
		
    使用ListBox时通常会借助ItemTemplate帮助我们实现更复杂多样的样式显示,体现了Xaml的灵活.如何动态改变变ListBox的样式,实现类似电脑资源管理器中列表显示和图标显示形式的替换. ...
    
		
    5. 
						
  5. 微信小程序，动态改变样式
		
    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...
    
		
    6. 
						
  6. css:hover状态改变另一个元素样式的使用
		
    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...
    
		
    7. 
						
  7. vue点击时动态改变样式 -------  最简单的方法
		
    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...
    
		
    8. 
						
  8. js 输出语句document.write()及动态改变元素中内容innerHTML的使用
		
    操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标 ...
    
		
    9. 
						
  9. jquery动态改变元素内容
		
    ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容(包括 HTML 标记) ● val() - 设置或返回表单字段的值(只针对表单或者输入框)
    
		
    10. 
		

	


随机推荐
	

    
									
  1. win10 64位安装redis 及Redis Desktop Manager使用
			
    说多无益,先把redis在win上的开发环境搭一下. redis官方没有64位的Windows下的可执行程序,目前有个开源的托管在github上, 地址:https://github.com/Serv ...
    
			
    2. 
						
  2. 借助meta影藏顶部菜单
			
    1===>报错 Cannot find module 'webpack/lib/Chunk' 删除node_modules 然后重新下载 4==> 现在已进入页面,底部就有四个菜单,在点击 ...
    
			
    3. 
						
  3. 1、zabbix监控基础概念
			
    目录 为什么要使用监控? 监控怎么用? 去到一家新公司,应该如何搭建监控系统? 我叫张贺,贪财好色.一名合格的LINUX运维工程师,专注于LINUX的学习和研究,曾负责某中型企业的网站运维工作,爱好佛 ...
    
			
    4. 
						
  4. 201871010132-张潇潇-《面向对象程序设计（java）》第八周总结
			
    201871010132-张潇潇<面向对象程序设计(java)>第八周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
    
			
    5. 
						
  5. 【声明式事务】Spring事务介绍（一）
			
    事务管理对于企业应用来说是至关重要的,当出现异常情况时,它也可以保证数据的一致性. Spring事务有两种管理方式:编程式事务和声明式事务 编程式事务使用TransactionTemplate或者直接 ...
    
			
    6. 
						
  6. H5/纯JS实现：把网页中的文字复制到剪切板
			
    copy =() => { const dom = document.getElementById(`collect-text-${t.Id}`) const selection = windo ...
    
			
    7. 
						
  7. vue.js操作元素属性
			
    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...
    
			
    8. 
						
  8. H5开发 连接蓝牙打印机 打印标签（斑马ZR628）
			
    1.连接蓝牙打印机(先用手机自带蓝牙进行配对),然后绑定出已配对的蓝牙设备(用来选择/切换打印机之用),代码如下 已配对蓝牙设备,中显示的就是已连接的,点击一下即可 代码: <!DOCTYPE  ...
    
			
    9. 
						
  9. 【shell命令】$#、$*、$n分别表示的含义
			
    $#.$*.$n分别表示的含义 1.[$0] 表示当前脚本的文件名: 2.[$n] 表示传递给脚本的第n个参数值(n为1~9): 3.[$*] 表示传递给脚本的所有参数(不包括脚本名称的参数): 4. ...
    
			
    10. 
						
  10. 此贴告诉你：为啥shell脚本人，不建议学python
			
    py很强大,我承认.但在运维方面,py不但不强大,还有硬伤.正因为有下述硬伤,所以我们运维,还是用shell多,用py极少.我看到用shell的人很多,你建议人用python,人说py是很好,但下一秒 ...
    
			
    11.