自己查资料总结的两种方法
一、纯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>
原文地址：https://www.cnblogs.com/shuen/p/8995201.html
时间： 2024-08-06 22:05:20