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

一、纯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. 导入部署 hand
			
    差价导入部署步骤如下: 执行视图,包. 定义消息,验证的时候使用(XXC1003DFM_BI_001 到 XXC1003DFM_BI_007,含中英文). 通用导入设置: 电子表元数据管理,含导入正确 ...
    
			
    2. 
						
  2. 震惊，用了这么多年的 CPU 利用率，其实是错的
			
    导读:本文翻译自 Brendan Gregg 去年的一片博客文章 "CPU Utilization is Wrong",从标题就能想到这篇文章将会引起争议.文章一上来就说,我们&q ...
    
			
    3. 
						
  3. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
			
    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...
    
			
    4. 
						
  4. 20.Java基础_对象的构造函数
			
    package pack1; public class Student { private String name; private int age; //构造方法 //如果没有任何构造函数,系统会自 ...
    
			
    5. 
						
  5. Pwnable-mistake
			
    先看看c的源码 #include <stdio.h> #include <fcntl.h> #define PW_LEN 10 #define XORKEY 1 void xo ...
    
			
    6. 
						
  6. [C4W3] Convolutional Neural Networks - Object detection
			
    第三周 目标检测(Object detection) 目标定位(Object localization) 大家好,欢迎回来,这一周我们学习的主要内容是对象检测,它是计算机视觉领域中一个新兴的应用方向, ...
    
			
    7. 
						
  7. 展示出版社：写上URL地址对应函数、函数当中查询出所有的出版社、对象交给模板、循环对象拿出每条数据展示
			
    URL: from django.conf.urls import urlfrom django.contrib import adminfrom app01 import views urlpatt ...
    
			
    8. 
						
  8. jwt， token， session和cookies
			
    jwt token,session和cookies
    
			
    9. 
						
  9. mysql增加索引、删除索引、查看索引
			
    添加索引 有四种方式来添加数据表的索引: 1.添加一个主键,这意味着索引值必须是唯一的,且不能为NULL ALTER TABLE tbl_name ADD PRIMARY KEY (column_li ...
    
			
    10. 
						
  10. let/const特性
			
        let: 1.声明的变量不存在预解析: console.log(a); let a=1; 2.变量名不允许重复(在同一作用域下): { let a=1; let a=2; console.lo ...
    
			
    11.