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

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

阿新 • • 發佈：2018-05-05
query 何事 play 意思 size 動態改變 用法 HR 一起

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

一、純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生成的元素)

     
 query   何事   play   意思   size   動態改變   用法   HR   一起   自己查資料總結的兩種方法
一、純css改變
　　a:hover:before{left:-20%;}　　a:hover:after{right:-20%;}　　a:before{  left:-100% 



  
 

    


    
    
css的偽元素::after和::before的使用

     
 
                
::after是一個CSS偽元素，使用::after，你可以從CSS裡往頁面上新增內容。雖然最終生成的東西並不是真正的DOM裡的內容，但這些內容能像普通內容一樣顯示，基本下的效果是這樣的：
CSS程式碼
div::after{
content:"你好";
}
HTML程式碼 



  
 

    


    
    
通過 after() 和 before() 方法添加若幹新元素

     
 clas   big   innerhtml   comm   code   lov   fun   eat   創建    
after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。
在下面的例 



  
 

    


    
    
用 CSS 和 JS 實現元素的水平垂直居中

     
 
								
								            
						
                
一、CSS 實現（2種方法）
方法1：已知要居中元素的寬高
   .d1{
        width:200px;
        height:200px;
        background- 



  
 

    


    
    
觸發器after和before

     
 p s   而後   color   back   lac   per   scott   each   觸發器   
--after和before
CREATE OR REPLACE TRIGGER del_emp1
               BEFORE update OR insert OR del 



  
 

    


    
    
jQuery中的append()和prepend(),after()和before()的差別

     
 兄弟節點   mar   ant   trac   nes   function   data   end   markdown   
        jQuery中的append()和preappend(),after()和before()的差別

append()和prepend()

如果



&l 



  
 

    


    
    
after::和before::的用法

     
 不能   left   padding   splay   圖標   tle   方便   pan   ive   :after和:before的作用及使用方法
 


1.  :before 和 :after 的主要作用是在元素內容前後加上指定內容，示例：
HTML代碼：

<p>你好</ 



  
 

    


    
    
jQuery文檔操作--append()、prepend()、after()和before()

     
 概述   append()   函數   utf-8   append   htm   rec   索引   插入內容        append(content|fn) 
概述
   向每個匹配的元素內部追加內容，這個操作與對指定的元素執行appendChild方法，將它們添加到文檔中的情況類似
參數
   



  
 

    


    
    
css after和before詳解

     
 
								
								            
						
                栗子

html

<div class="beian">
<a href="#">22222222222222</a>
</div>


css

.b 



  
 

    


    
    
使用 Date 的after 和 before 時請注意了

     
 
							
							
							Date1.after(Date2),當Date1大於Date2時，返回TRUE，當小於等於時，返回false； 

Date1.before(Date2)，當Date1小於Date2時，返回TRUE，當大於等於時，返回false； 

如果業務資料存在相等的時 



  
 

    


    
    
用JODConverter和openoffice生成PDF文件時候的PAGESIZE設定問題

     
 
                
生成PDF的方法有很多


這裡要說的是如果我們要轉換的excel等的紙張大小不是預設的A4的情況下如何處理。
      一般轉換的時候會有部分程式碼是下面這樣。
  // convert 
　　DocumentConverter converter = new Open 



  
 

    


    
    
js動態改變css偽類樣式

     
  
 
   
 js動態改變css偽類樣式 
   
 首先我們來看下頁面上需要實現的基本效果，如下圖所示： 
  
 因此我們可以使用如下js程式碼來試試看，是否能使用js改變偽類？如下程式碼所示： 
   
 $(function() {
  $('.listnav li' 



  
 

    


    
    
select 下拉列表選擇框效果及美化（before 和  after偽元素的妙用）

     
 color   dem   cti   relative   ccs   ota   otto   center   round   
參考博客：https://github.com/chokcoco 
                http://www.cnblogs.com/libin-1/p/5766 



  
 

    


    
    
select 下拉列表選擇框效果及美化（before 和 after偽元素的妙用）

     
  
 參考部落格：https://github.com/chokcoco  http://www.cnblogs.com/libin-1/p/5766729.html  http://www.cnblogs.com/coco1s/p/5667853.html  http://sbco.cc/magicCss/ 



  
 

    


    
    
CSS :befor :after 偽元素的妙用

     
 　　本篇重點介紹CSS中的:befor、:after建立的偽元素幾種使用場景，如填充文字、作為iconfont、進度線、時間線以及幾何圖形。
1. 介紹
1.1 說明
CSS中的:befor、:after都會建立一個偽元素，其中:befor建立的偽元素是所選元素的第一個子元素，:after建立的偽元素是 



  
 

    


    
    
【JQ】jQuery改變css偽元素樣式

     
 
                偽元素是什麼？例如 :bofore、:after偽元素不是dom，不能直接操作。若有以下html和css，通過操作偽元素改變圖示顏色：<div class = "table-container">

    <span class="glyphicon gl 



  
 

    


    
    
css :hover偽類改變其他元素樣式

     
 
                html部分：

<div>我喜歡</div>

<ul>

<li>shiziwang</li>

<li>saonan</li>

<li>xinba</li>

 



  
 

    


    
    
window.getComputedStyle可獲取 偽類元素 樣式

     
 monkey   版本   default   click   get   測試結果   art   官方文檔   tro   window.getComputedStyle詳解 
window.getComputedStyle說明：getComputedStyle()返回元素的所有CSS屬性的計算值語法：v 



  
 

    


    
    
jQuery動態改變css樣式

     
 過時   css樣式   劃過   jquery   css   類方法   col   事件   log   jQuery提供的事件類方法 - hover()。值得註意的是，hover()方法需要定義兩個函數，一個是鼠標劃過時；另一個是鼠標劃過後。$("#61dh a").css(‘color‘,‘#123 



  
 

    


    
    
js動態改變樣式屬性（style屬性）

     
 lan   hang   borde   設置   meta   margin   change   eight   nts   
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">