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

一、纯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. Flask—好的博客
			
    https://www.cnblogs.com/cwp-bg/p/8892403.html https://www.cnblogs.com/ExMan/p/9825710.html https://w ...
    
			
    2. 
						
  2. 5G浪潮来袭，程序员在风口中有何机遇
			
    导读:本文共2894字,预计阅读时间为9分钟.通过阅读本文,你将了解到5G的优势.即将燃爆的领域以及程序员在快速发展的5G产业中所需关注的技术. 5G时代已经来临 随着中美5G主导权之战的持续发酵,5 ...
    
			
    3. 
						
  3. 12. final修饰符
			
    一.final修饰符概述 1. final可以修饰类.变量和方法 2. final修饰的类.变量和方法不可改变 3. 不允许为final变量重新赋值,子类不允许覆盖父类的final方法,final类不 ...
    
			
    4. 
						
  4. 1. 配置Java开发环境
			
    一.JDK & JRE & JVM 1. JDK是什么? JDK的全称是Java SE Development Kit,即Java标准版开发包,是Oracle提供的一套用于开发Java ...
    
			
    5. 
						
  5. (三)Amazon Lightsail 部署LAMP应用程序之连接到Lightsail数据库
			
    连接到Lightsail数据库 简介:应用程序的Web前端的第一次迭代不建议固有的可伸缩性,因为数据库和前端位于同一台机器,只需要额外的前端容量,添加额外的数据库实例就会出现问题,若想解决此问题,需要 ...
    
			
    6. 
						
  6. 【BZOJ3534】[SDOI2014] 重建（矩阵树定理）
			
    点此看题面 大致题意: 给你一张图,每条边有一定存在概率.求存在的图刚好为一棵树的概率. 矩阵树定理是什么 如果您不会矩阵树定理,可以看看蒟蒻的这篇博客:初学矩阵树定理. 矩阵树定理的应用 此题中,直 ...
    
			
    7. 
						
  7. 重构 改善既有代码的设计 (Martin Fowler 著)
			
    第1章 重构, 第一个案例 1.1 起点 1.2 重构的第一步 1.3 分解并重组 statement() 1.4 运用多态取代与价格相关的条件逻辑 1.5 结语 第2章 重构原则 2.1 何谓重构  ...
    
			
    8. 
						
  8. [LeetCode] 238. Product of Array Except Self 除本身之外的数组之积
			
    Given an array nums of n integers where n > 1,  return an array output such that output[i] is equ ...
    
			
    9. 
						
  9. 解决静态方法调用注入的service
			
    在使用jpa的复杂查询时,声明了specification时声明为静态方法,导致注入的service无法使用,故想到俩种方式,一种手动注入,一种注解注入,此文使用的时注解注入: 解决静态方法调用注入的 ...
    
			
    10. 
						
  10. LeetCode 20：有效的括号 Valid Parentheses
			
    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. Given a string containing just the characters '(', ' ...
    
			
    11.