动态改变伪元素样式的方(用:after和:before生成的元素)

Posted 2020-11-02 进击的single

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动态改变伪元素样式的方(用:after和:before生成的元素)相关的知识，希望对你有一定的参考价值。

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

一、纯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>

View Code


二、用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>

View Code

以上是关于动态改变伪元素样式的方(用:after和:before生成的元素)的主要内容，如果未能解决你的问题，请参考以下文章

伪元素 ::after 和 ::before 应该这么用

css 伪元素::after

transition动画初级介绍

更改 :before 和 :after 伪元素的样式？ [复制]