a標簽偽類選擇器以及偽元素:hover的案例


1.通過我們的觀察發現a標簽存在一定的狀態
1.1默認狀態, 從未被訪問過
1.2被訪問過的狀態
1.3鼠標長按狀態
1.4鼠標懸停在a標簽上狀態

2.什么是a標簽的偽類選擇器?
a標簽的偽類選擇器是專門用來修改a標簽不同狀態的樣式的

3.格式
:link 修改從未被訪問過狀態下的樣式
:visited 修改被訪問過的狀態下的樣式
:hover 修改鼠標懸停在a標簽上狀態下的樣式
:active 修改鼠標長按狀態下的樣式
4.注意點
4.1a標簽的偽類選擇器可以單獨出現也可以一起出現
4.2a標簽的偽類選擇器如果一起出現, 那么有嚴格的順序要求
編寫的順序必須要個的遵守愛恨原則 love hate
4.3如果默認狀態的樣式和被訪問過狀態的樣式一樣, 那么可以縮寫

代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>86-a標簽的偽類選擇器</title>
    <style>
        /* a:link{ color: tomato; } a:visited{ color: green; } a:hover{ color: orange; } a:active{ color: pink; } */ a{ // 簡寫格式
 color: green; } /*a:link{*/
            /*color: green;*/
        /*}*/
        /*a:visited{*/
            /*color: green;*/
        /*}*/ a:hover{ color: orange; } a:active{ color: pink; } </style>
</head>
<body>
<a href="http://www.taobao.com">taobao</a>
<a href="http://www.jd.com">jd</a>
</body>
</html>
1.在企業開發中編寫a標簽的偽類選擇器最好寫在標簽選擇器的后面
2.在企業開發中和a標簽盒子相關的屬性都寫在標簽選擇器中(顯示模式/寬度/寬度)
3.在企業開發中a標簽文字/背景/相關的都寫在偽類選擇器中

五.  下面是通過:hover來修改圖片寬度而達到頁面伸展的動畫小例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>92-過渡模塊-手風琴效果</title>
    <style>
        *{ margin: 0; padding: 0; } ul{ width: 960px; height: 300px; margin: 100px auto; border: 1px solid #000; overflow: hidden; } ul li{ list-style: none; width: 160px; height: 300px; background-color: red; float: left; /*border: 1px solid #000;*/
            /*box-sizing: border-box;*/
            /*transition-property: width;*/
            /*transition-duration: 0.5s;*/ transition: width 0.5s; } /*通過偽元素:hover修改鼠標懸停ul標簽上的狀態*/
        /*當鼠標懸停在ul上, 就會修改ul的子元素li的寬度*/ ul:hover li{ width: 100px; } /*當鼠標懸停在ul的子元素li上時, 就會修改子元素li的寬度*/ ul li:hover{ width: 460px; } </style>
</head>
<body>
<ul>
    <li><img src="images/ad1.jpg" alt=""></li>
    <li><img src="images/ad2.jpg" alt=""></li>
    <li><img src="images/ad3.jpg" alt=""></li>
    <li><img src="images/ad4.jpg" alt=""></li>
    <li><img src="images/ad5.jpg" alt=""></li>
    <li><img src="images/ad6.jpg" alt=""></li>
</ul>
</body>
</html>
 
        

 

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM