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

一、纯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. js对象比较
			
    使用闭包实现 js 对象按指定属性进行大小比较 需要比较的对象 let obj1 = { name:'张三', age:19 }; let obj2 = { name:'李四', age:22 };  ...
    
			
    2. 
						
  2. Mysql—用户表详解(mysql.user)
			
    MySQL是一个多用户管理的数据库,可以为不同用户分配不同的权限,分为root用户和普通用户,root用户为超级管理员,拥有所有权限,而普通用户拥有指定的权限. MySQL是通过权限表来控制用户对数据 ...
    
			
    3. 
						
  3. liteos分散加载（十四）
			
    1. 概述 1.1 基本概念 分散加载是一种实现特定代码快速启动的技术,通过优先加载特定代码到内存,达到缩短从系统开机到特定代码执行的时间.可被应用来实现关键业务的快速启动. 嵌入式系统通过uboot ...
    
			
    4. 
						
  4. Shell命令-搜索文件或目录之which、find
			
    文件及内容处理 - which.find 1. which:查找二进制命令,按环境变量PATH路径查找 which命令的功能说明 which 命令用于查找文件.which 指令会在环境变量 $PATH ...
    
			
    5. 
						
  5. 13. 抽象类 & 接口
			
    一.抽象类 // 抽象类Shape public abstract class Shape { // 1. 成员变量 private String color; // 2. 初始化块 { System ...
    
			
    6. 
						
  6. Pwnable-collision
			
    一样的连接ssh,输入密码,查看文件 看看col.c的源码 #include <stdio.h> #include <string.h> unsigned long hashc ...
    
			
    7. 
						
  7. [PHP] 再续　Laravel 5.5 接口 跨域问题 【终极暴力解决办法】
			
    上文中提到 Laravel5.5 使用 laravel-cors 实现 Laravel 的跨域配置 用插件来跨域 此方法能解决一部分api 请求问题 但我碰到的是 接口 请求size 超过10k,导致 ...
    
			
    8. 
						
  8. vue.js操作元素属性
			
    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...
    
			
    9. 
						
  9. [LOJ 2718][UOJ 393][BZOJ 5415][NOI 2018]归程
			
    [LOJ 2718][UOJ 393][BZOJ 5415][NOI 2018]归程 题意 给定一张无向图, 每条边有一个距离和一个高度. 再给定 \(q\) 组可能在线的询问, 每组询问给定一个点  ...
    
			
    10. 
						
  10. 如何编写一个 SendFile 服务器
			
    如何编写一个 SendFile 服务器 前言 之前讨论零拷贝的时候,我们知道,两台机器之间传输文件,最快的方式就是 send file,众所周知,在 Java 中,该技术对应的则是 FileChann ...
    
			
    11.