前端CSS中“：hover”伪类选择器的使用
- 一、前言
- 二、改变链接的属性
- 1.源码1
- 2.源码1运行效果
- 三、改变图片的属性
- 1.源码2
- 2.源码2运行效果
- 四、改变卡片的属性
- 1.源码3
- 2.源码3运行效果
- 五、结语
- 六、定位日期
一、前言
在css中的:hover（悬停）伪类选择器，主要功能是我们用鼠标悬停在我们设置好的页面元素上时，用以触发我们设置的某一元素的属性效果。它不会改变原有的代码功能，但可以加强我们使用者的交互性。
对一个超链接，如果我们鼠标悬停碰到它（移动鼠标碰到它），然后它出现了某种变化，如变大、变颜色等；或一个按钮，我们也用鼠标悬停碰到它的位置，原本方形变圆；又或者一张卡片，当鼠标悬停到它的位置时，它产生了阴影效果。网页有以上功能，这是不是可变得很有趣而丰富了呢？
这里我们举了3个例子，使用“:hover”伪类选择器，分别对链接、图片、卡片设置几个属性，达到动画演示的目的。
二、改变链接的属性
1.源码1
这里简单设置了一个超链接，因为仅用于演示，a标签里面的href属性便选择了“#”不跳转，如果有需要可以填写某个超链接，如某个网站的地址，我们点击它便会跳转到那个网站了。这里鼠标未悬停到链接上时，是黄背景蓝文字，当我们鼠标悬停到它时，它变慢慢变为蓝背景白文字。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 设置链接的初始样式 */
.link {
color: blue; /* 初始文本颜色为蓝色 */
margin: 100px; /* 四周的外边距为100px */
background-color: yellow; /* 初始背景颜色为黄色 */
padding: 10px 20px; /* 内边距：上下10px，左右20px */
transition: all 0.3s ease-in-out; /* 定义所有属性的变化将在0.3秒内平滑过渡 */
}
/* 鼠标悬停时的样式变化 */
.link:hover {
color: white; /* 悬停时文本颜色变为白色 */
background-color: blue; /* 悬停时背景颜色变为蓝色 */
}
</style>
</head>
<body>
<br>
<a href="#" class="link">我是一个链接</a> <!-- 链接元素，应用了class "link" -->
</body>
</html>
2.源码1运行效果
- 视频效果如下：
使用hover改变链接属性，黄底蓝字变化为蓝底白字
- 鼠标未悬停在链接上时，截图效果如下：
- 鼠标悬停在链接上时，截图效果如下：
三、改变图片的属性
这里我们先创建并显示一个图片，当鼠标悬停到它时，它则会变大。当然为了学习需要，我们同时添加了其他功能，如边框、圆角也会发生一些变化。
1.源码2
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 图片的基础样式设置 */
.image {
width: 200px; /* 设置图片宽度为200像素 */
height: 150px; /* 设置图片高度为150像素 */
margin: 50px 50px; /* 设置图片外边距，上下左右各50像素 */
border: 5px solid greenyellow; /* 设置边框宽度为5像素，样式为实线，颜色为青黄色 */
transition: transform 0.3s ease, /* 定义放大变换效果，持续时间0.3秒，动画过渡效果为平滑 */
border-radius 1s linear 0.5s, /* 定义边框圆角过渡效果，持续时间1秒，动画过渡效果为线性，延迟0.5秒开始 */
border-color 1s ease-in; /* 定义边框颜色过渡效果，持续时间1秒，动画过渡效果为渐进 */
}
/* 鼠标悬停时的样式设置 */
.image:hover {
transform: scale(1.2); /* 鼠标悬停时，将图片放大到120%的原始大小 */
border: 6px solid aqua; /* 鼠标悬停时，改变边框宽度为6像素，颜色为水绿色 */
border-radius: 50%; /* 鼠标悬停时，将边框设置为圆形 */
}
</style>
</head>
<body>
<!-- 图片元素，设置源路径，alt属性为备用文本,当图片不显示时先显示alt文本内容 -->
<img src="./小蜗牛.jpg" class="image" alt="小蜗牛764号">
</body>
</html>
2.源码2运行效果
- 视频效果如下：
使用hover改变图片属性，矩形变椭圆，绿框变天蓝框，图片悬停变大
-
鼠标未悬停在图片上时，截图效果如下：
-
鼠标悬停在图片上时，截图效果如下：
四、改变卡片的属性
这里我们主要是想演示卡片的阴影效果，当然为了美观，我们插入了张图片和设置了个标题。我们主要目的还是是想演示卡片的阴影效果，也就是图片外的那个方框的内容。另外简单补充阴影box-shadow的内容，默认有5个参数，为便于理解，我们举例设置如下，
box-shadow: A B C D rgba(n,n,n,0~1)
- A ------ 水平方向阴影，正数向右，负数向左。
- B ------ 垂直方向阴影，正数向下，负数向上。
- C ------ 阴影的模糊半径，值越大，阴影越模糊。
- D ------ 阴影的扩展半径，正值会使阴影扩大和更宽。
- rgba ------ 红色(red)、绿色(green)、蓝色(blue)、透明度(alpha)，相关的参数。
补充： C和D的参数是可以选择性设置的，但其他的参数必须要设置，参数虽然有正有负，也别忘了还有个0也是可以设置的。
1.源码3
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 设置卡片的宽度、高度、边框、内边距、外边距和阴影过渡效果 */
.card {
width: 400px; /* 卡片宽度设置为400px */
height: 300px; /* 卡片高度设置为300px */
border: 1px solid #ccc; /* 设置边框颜色为浅灰色 */
padding: 20px; /* 内边距20px，为内容提供空间 */
margin: 10px; /* 外边距10px，隔开周围元素 */
transition: box-shadow 0.3s ease; /* 定义阴影变化的过渡效果，持续0.3秒，平滑过渡 */
}
/* 鼠标悬停时增加阴影，增强立体感和视觉焦点 */
.card:hover {
box-shadow: 5px 5px 20px rgba(206, 37, 206, 0.7); /* 阴影为深紫色，透明度0.7，更为明显 */
}
/* 设置卡片内图片的样式，包括宽度、自适应高度和边角圆滑 */
.card img {
width: 100%; /* 图片宽度为卡片宽度的100% */
height: auto; /* 图片高度自动调整以保持宽高比 */
border-radius: 10px; /* 图片边角圆角半径为10px */
}
</style>
</head>
<body>
<div class="card">
<img src="./小蜗牛.jpg" alt="小蜗牛764号" style="max-height: 60%;"> <!-- 图片路径，最大高度限制为60% -->
<h1>小蜗牛764号的卡片</h1> <!-- 卡片标题 -->
</div>
</body>
</html>
2.源码3运行效果
- 视频效果如下：
使用hover给卡片添加阴影效果
-
鼠标未悬停到卡片上，截图效果如下：
-
鼠标悬停到卡片上，截图效果如下：
五、结语
用于衔接前面编写的transition和border-radius的文章。本文关于阴影box-shadow效果的，只是简单描写，笔者认为对此学习需要还不够，需要再深入学习一下，最好再举个例子来学习效果好一些。那么关于阴影的，笔者会看情况再起一篇博文。笔者认为对于某一部分的内容，就主要先对此部分学好便可，次要部分只要不影响整体我们先了解，先把主要部分弄完，如此效率会高些。
六、定位日期
2024.4.19
15：18
