CSS学习笔记：超链接样式，hover伪类，鼠标样式

最新推荐文章于 2024-04-26 16:52:43 发布

xuxuejian9824

最新推荐文章于 2024-04-26 16:52:43 发布

阅读量1.6k

点赞数 3

分类专栏：前端 # CSS 文章标签： css 学习 css3

本文链接：https://blog.csdn.net/weixin_42576837/article/details/127373083

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

绿叶学习网

超链接伪类

在这里插入图片描述
鼠标点击的瞬间，对应的伪类是 a:active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接伪类</title>
    <style type="text/css">
        a:link {color: red;}
        a:visited {color: purple;}
        a:hover {color: yellow;}
        a:active {color: blue;}
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点击跳转百度</a>
</body>
</html>

未点击时：
在这里插入图片描述
鼠标经过时：

点击瞬间：

点击之后：

在实际开发中，我们只会用到两种状态：未访问时状态和鼠标经过状态。

a{…}
a:hover{…}

对于未访问时状态，我们直接针对a元素定义就行了，没必要使用a:link。

<style type="text/css">
    a {color: red;}
    a:hover {color: blue;}
</style>

深入了解:hover

在这里插入图片描述

“:hover”用于div

div  {
    width: 200px;
    height: 150px;
    background-color: bisque;
}
div:hover {
    background-color: blue;
}

在这里插入图片描述

:hover用于img

img {
    border: 1px solid red;
}
img:hover {
    width: 100px;
    height: 100px;
}

在这里插入图片描述

此外， “:hover伪类”应用非常广泛，任何一个网站都会大量地用到，我们要好好掌握。

鼠标样式

在CSS中，我们可以使用cursor属性来定义鼠标样式。

cursor属性取值如下表所示。估计小伙伴们都惊呆了：“我晕，这么多属性值，怎么记得住啊？”其实大家不用担心，在实际开发中我们一般只会用到3个：default、pointer和text。

在这里插入图片描述
通常鼠标移动到文本段落上时，会需要改变一个鼠标的样式。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接伪类</title>
    <style type="text/css">
    img {
        width: 100px;
        height: 100px;
        border: 1px solid red;
}
    p:hover {
        cursor: text;
    }
    </style>
</head>
<body>
    <img src="./恐龙.jpg" alt=""/>
    <p>这是一只恐龙，这是一只恐龙，这是一只恐龙，这是一只恐龙，这是一只恐龙。
        这是一只恐龙，这是一只恐龙，这是一只恐龙，这是一只恐龙，这是一只恐龙。
        这是一只恐龙，这是一只恐龙，这是一只恐龙，这是一只恐龙，这是一只恐龙。
    </p>
</body>
</html>