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

一、纯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. Linux—网络通讯管理命令
			
    一.ping命令 . ping 主机名 . ping 域名 [root@localhost ~]# ping www.baidu.com . ping IP地址 [root@localhost ~]# ...
    
			
    2. 
						
  2. 监控类shell脚本
			
    1)开头加解释器:#!/bin/bash 2)语法缩进,使用四个空格:多加注释说明. 3)命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用. 4)默认变量是全局的,在函数中变量l ...
    
			
    3. 
						
  3. 在Rust中使用C语言的库功能
			
    主要是了解unsafe{}语法块的作用. #[repr(C)] #[derive(Copy, Clone)] #[derive(Debug)] struct Complex { re: f32, im ...
    
			
    4. 
						
  4. JS的节流、防抖及使用场景
			
    前言 据说阿里有一道面试题就是谈谈函数节流和函数防抖. 糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习.here we go! 概念和例子 函数防抖(debounce ...
    
			
    5. 
						
  5. luoguP4113 [HEOI2012]采花
			
    经典颜色问题推荐博文 https://www.cnblogs.com/tyner/p/11519506.html https://www.cnblogs.com/tyner/p/11616770.ht ...
    
			
    6. 
						
  6. web-never give up
			
    打开题目连接 ?id=1 ,疑是注入点 但是输入其他数字无果 打开源码,发现注释有网页链接 打开连接123.206.87.240:8006/test/1p.html 发现回到了bugku的论坛首页,应 ...
    
			
    7. 
						
  7. TestNG.xml 配置
			
    <packages>表示以测试类所在的包的方式定义测试用例,包中的所有测试类都被涉及,粒度较大. <?xml version="1.0" encoding=&qu ...
    
			
    8. 
						
  8. bioawk
			
    https://github.com/lh3/bioawk 1.基本思想 使用: usage: bioawk [-F fs] [-v var=value] [-c fmt] [-tH] [-f pro ...
    
			
    9. 
						
  9. C语言中如何求最大公约数及如何求最小公倍数。
			
    最大公约数:                                                                                               ...
    
			
    10. 
						
  10. 在Ubuntu18.04.2LTS上安装电子书软件
			
    在Ubuntu18.04.2LTS上安装电子书软件 一.前言      很多时候我们想在Ubuntu上阅读电子书,但是Ubuntu上的软件对于这种阅读的界面支持并不好,因此我们需要自己加入喜欢的阅读器 ...
    
			
    11.