＜a＞伪类和重要的hover伪类

最新推荐文章于 2024-01-29 16:43:03 发布

weixin_41387874

最新推荐文章于 2024-01-29 16:43:03 发布

阅读量476

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_41387874/article/details/115909687

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

写在之前

可能已经在编程中见过了，在<a>标签被点击之前呈现蓝色，<a>标签点击之后呈现紫色，鼠标点击<a>标签的瞬间，呈现红色。原因是存在一个超链接伪类。

超链接伪类

超链接伪类用于定义<a>标签在不同状态下的颜色，如：鼠标点击前、鼠标点击时、鼠标点击后和鼠标悬浮在<a>标签上时。
直接在<a>标签中定义color可以起到和a:link一样的效果。
关于为什么打开页面之后，<a>标签都是紫色，是因为这个链接在之前被点击过，浏览器中有访问记录。
使用最多的是 a:hover。

超链接伪类	作用
a:link	用于定义<a>标签未访问时的样式
a:visited	用于定义<a>标签访问过后的样式
a:hover	用于定义鼠标悬浮在<a>标签上时<a>标签的样式
a:active	用于定义<a>标签被鼠标点击时的样式

CSS定义<a>标签伪类时，要按照 a:link , a:visited , a:hover , a:active 的顺序进行定义，否则可能不起效果。

hover伪类

hover伪类不仅可以用于<a>标签，它有着广泛的应用，如：hover伪类可以应用于<div>标签；hover伪类应用于<img>标签，用于改变鼠标悬浮于元素时元素的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style yupe="text/css">
            div{width:100px;height:100px;border: 2px solid red;}
            div:hover{background-color:red;}
            img{border:none;}
            img:hover{border:2px solid red;}
        </style>
    </head>
    <body>
        <div>

        </div>
        <img src="8C52A09A073693FCC58E4E646220AE35.jpg" alt=""/>
    </body>
</html>

weixin_41387874

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜a＞伪类和重要的hover伪类

写在之前可能已经在编程中见过了，在<a>标签被点击之前呈现蓝色，<a>标签点击之后呈现紫色，鼠标点击<a>标签的瞬间，呈现红色。原因是存在一个超链接伪类。超链接伪类超链接伪类用于定义<a>标签在不同状态下的颜色，如：鼠标点击前、鼠标点击时、鼠标点击后和鼠标悬浮在<a>标签上时。直接在<a>标签中定义color可以起到和a:link一样的效果。关于为什么打开页面之后，<a>标签都是紫色，是因为这个链接在之前被点
复制链接

扫一扫