非零基础自学前端最后一遍一 HTML+CSS 8 CSS常见选择器 8.8 动态伪类-hover

缺乏、安全感 2024-03-25 14:11 39阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.8 动态伪类-hover
             *   *  8.8.1 动态伪类（dynamic pseudo-classes)

![在这里插入图片描述][f8f3b733811c44e6926f467f35852e28.png_pic_center]

#### 一 HTML+CSS ####

#### 8 CSS常见选择器 ####

##### 8.8 动态伪类-hover #####

###### 8.8.1 动态伪类（dynamic pseudo-classes) ######

*  使用举例
    
     *  a:link 未访问的链接
        
        ![在这里插入图片描述][ea4d927fd11945c7ab9378bac52d064b.png_pic_center]
     *  a:visited 已访问的链接
        
        ![在这里插入图片描述][b1e57790489841d5b37c715e0b8e15ed.png_pic_center]
     *  a:hover 鼠标挪动到链接上(重要)
        
        ![在这里插入图片描述][8ab16c38724f42ebb6b5179db288d72a.png_pic_center]
     *  a:active 激活的链接（鼠标在链接上长按住未松开）
        
        ![在这里插入图片描述][27a19d58bd904a91a1706a40235984f8.png_pic_center]
 *  使用注意
    
     *  :hover必须放在:link和:visited后面才能完全生效
     *  :active必须放在:hover后面才能完全生效
     *  所以建议的编写顺序是 :link、:visited、:hover、:active
 *  除了a元素，:hover、:active也能用在其他元素上

[f8f3b733811c44e6926f467f35852e28.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a8f59b53c80d4e8489cb4cc11abd38b6.png
[ea4d927fd11945c7ab9378bac52d064b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7f5221d10935452e9b9096490fd02d5c.png
[b1e57790489841d5b37c715e0b8e15ed.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cd955de443164730a32ed1bba4402353.png
[8ab16c38724f42ebb6b5179db288d72a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/648108a3b1a043b6be62eb10854bd96f.png
[27a19d58bd904a91a1706a40235984f8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a1bab5e9d95241fbbf9d1ab98ed6b896.png