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

一、纯css改变

  1. 　　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,但是这个属性的兼容性不好
  1. ：target定义和用法

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

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

  1.  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.        body,div,p,a{margin: 0;padding: 0;}
  8.         body{background: #00AA88}
  9.         div{
  10.             /*外面框框的div样式*/
  11.             width: 200px;
  12.             position: relative;
  13.             overflow: hidden;
  14.             height: 150px;
  15.         }
  16.         a{ display: inline-block; }
  17.        a:before,a:after{
  18.            /*动态加载的元素*/
  19.             content:"";
  20.             display: inline-block;
  21.             position: absolute;
  22.             width: 70%;
  23.             height:100%;
  24.             transform: skewX(20deg);
  25.             background: #fff;
  26.             opacity: 0.3;
  27.            transition: all .3s linear;
  28.            top:0;
  29.         }
  30.        p{
  31.            /*里面框的样式*/
  32.            background: #003eff;
  33.            display: inline-block;
  34.             width: 200px;
  35.            height: 150px;
  36.         }
  37.         a:hover:before{left:-20%;}
  38.         a:hover:after{right:-20%;}
  39.         a:before{  left:-100%; }
  40.         a:after{  right:-100%;  }
  41.  
  42.     </style>
  43. </head>
  44. <body>
  45.     <div id="d1" class="w">
  46.         <a id="i" href="#" class="a1">
  47.            <p></p>
  48.         </a>
  49.     </div>
  1.  
  1. 二、用js改变样式
  1. $('<style> a:before{left:-100%;} a:after{right:-100%;} </style>').appendTo('head')
    这个方法可以用于用于任何事件，但是有个不好的地方，会在head上面一直增加代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.        body,div,p,a{margin: 0;padding: 0;}
  8.         body{background: #00AA88}
  9.         div{
  10.             /*外面框框的div样式*/
  11.             width: 200px;
  12.             position: relative;
  13.             overflow: hidden;
  14.             height: 150px;
  15.         }
  16.         a{ display: inline-block; }
  17.        a:before,a:after{
  18.            /*动态加载的元素*/
  19.             content:"";
  20.             display: inline-block;
  21.             position: absolute;
  22.             width: 70%;
  23.             height:100%;
  24.             transform: skewX(20deg);
  25.             background: #fff;
  26.             opacity: 0.3;
  27.            transition: all .3s linear;
  28.            top:0;
  29.         }
  30.        p{
  31.            /*里面框的样式*/
  32.            background: #003eff;
  33.            display: inline-block;
  34.             width: 200px;
  35.            height: 150px;
  36.         }
  37.         /*a:hover:before{left:-20%;}*/
  38.         /*a:hover:after{right:-20%;}*/
  39.         a:before{  left:-100%; }
  40.         a:after{  right:-100%;  }
  41.  
  42.     </style>
  43. </head>
  44. <body>
  45.     <div id="d1" class="w">
  46.         <a id="i" href="#" class="a1">
  47.            <p></p>
  48.         </a>
  49.     </div>
  50.     <script src="js/jquery-1.11.3.js"></script>
  51.     <script>
  52.            var b=$("a:before");
  53.             var a=$("#i");
  54.             a.hover(function () {
  55.                 $('<style>a:before{left:-20%;} a:after{right:-20%;} </style>').appendTo('head')
  56.             },function () {
  57.                 $('<style> a:before{  left:-100%; } a:after{  right:-100%;  } </style>').appendTo('head')
  58.             })
  59.     </script>
  60. </body>
  61. </html>
  1.  

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

  1. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  2. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  3. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  4. Windows Phone 动态改变ListBox样式

    使用ListBox时通常会借助ItemTemplate帮助我们实现更复杂多样的样式显示,体现了Xaml的灵活.如何动态改变变ListBox的样式,实现类似电脑资源管理器中列表显示和图标显示形式的替换. ...

  5. 微信小程序，动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  6. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

  7. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  8. js 输出语句document.write()及动态改变元素中内容innerHTML的使用

    操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标 ...

  9. jquery动态改变元素内容

    ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容(包括 HTML 标记) ● val() - 设置或返回表单字段的值(只针对表单或者输入框)

随机推荐

  1. Web服务器—Apache

    Apache配置文件:httpd.conf文件 # 指定Apache的安装路径,此选项参数值在安装Apache时系统会自动把Apache的路径写入. ServerRoot "/www/ser ...

  2. Eclipse修改JSP文件的默认编码

    Eclipse新建JSP文件,可以看到默认使用的是ISO-8859-1编码,如下图,而这种编码是无法保存中文的,不符合我们的需求 那么应该怎样修改呢?找到菜单Window-Preferences,找到 ...

  3. 『006』Shell脚本

    『003』索引-Linux Shell Script Shel脚本-初步入门 [001]- 点我快速打开文章[<01 什么是 Shell>] [002]- 点我快速打开文章[<02 ...

  4. Java学习笔记（2）--- 对象和类入门，java包，this 和 super区别

    1.对象和类(Object and class): 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作. 面对对象编程是java非常重要的一部分,作者本身之前学过c ...

  5. (七)Amazon Lightsail 部署LAMP应用程序之清除已安装服务

    1.删除Lightsail实例 2.删除MySQL数据库 3.删除Amazon RDS数据库 4.删除负载均衡器 5.删除EC2实例 6.删除EC2安全组 7.删除快照

  6. Git之SSH公钥与私钥

    今天来探讨一下如何使用Git的操作,来进一步的实现代码的下载到本地,我原来也不是很明白git中生成公钥和私钥的作用,我一直在想,git里面你把自己的公钥发给了git的服务器,他是怎么判断的,每一次我换 ...

  7. Badboy安装和简单介绍

    参考链接:https://www.cnblogs.com/baoziluo/p/7907964.html

  8. 剑指Offer-12.数值的整数次方(C++/Java)

    题目: 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方.   保证base和exponent不同时为0 分析: 注意base为0和expo ...

  9. CF92B-Binary Number-（思维）

    https://vjudge.net/problem/CodeForces-92B 题意:给一个长度为106的二进制数,有两种操作,第一种是除以2,第二种是末尾+1,以二进制运算,问这个二进制数最少几 ...

  10. vue 使用JavaScript表达式

    vue使用JavaScript的运算方式 代码如下: <!doctype html> <html lang="en"> <head> <m ...