動態改變偽元素樣式的方(用:after和:before生成的元素)

本文轉載自查看原文 2018-05-05 16:57 1961 css/ javascript

自己查資料總結的兩種方法

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 理解偽元素 :before 和 :after 使用偽元素before和after CSS偽元素before和after 關於偽類元素:before和:after ::before和::after偽元素的用法 js控制偽元素before、after 偽元素：：before和：：after的詳細介紹 css偽元素:before和:after用法詳解 css before，after偽元素妙用 HTML：::before和::after偽元素的用法