自己查资料总结的两种方法
一、纯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>