一、鼠标悬停字体变大
鼠标悬停字体变大和改变颜色需要用到hover动态伪类选择器
1、hover动态伪类选择器
效果
可以使鼠标滑过前面紧贴元素目标1时,触发动态效果.
在使用时只要确保hover前紧贴的元素是鼠标滑过的目标,最后花括号前的元素是希望改变属性的目标即可.
strong:hover{
color: rgb(232,71,65);
font-size: 40px;
效果前：
效果后：
二· 鼠标悬停改变颜色
没放鼠标之前：
放了鼠标之后：
** 
**
** 通过hover伪类选择器来改变颜色**
** **
** 源代码：**
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.p1{
line-height: 40px;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div class="p1">
<p><a href="">家用电器</a> </p>
<p><a href="">手机</a>/<a href="">运营商</a>/<a href="">数码</a></p>
<p><a href="">电脑</a>/<a href="">办公</a></p>
<p><a href="">家居</a>/<a href="">家具</a>/<a href="">家庭</a>/<a href="">厨具</a></p>
<p><a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a>/<a href="">内衣</a></p>
<p><a href="">美妆</a>/<a href="">个护清洁</a>/<a href="">宠物</a></a></p>
<p><a href="">女装</a>/<a href="">箱包</a>/<a href="">钟表</a>/<a href="">珠宝</a></p>
<p><a href="">男鞋</a>/<a href="">运动</a>/<a href="">户外</a></p>
<p><a href="">房产</a>/<a href="">汽车</a>/<a href="">汽车用品</a></p>
</div>
</body>
</html>
本文转载自: https://blog.csdn.net/ydc222/article/details/127071949
版权归原作者 越努力越好 所有， 如有侵权，请联系我们删除。
版权归原作者 越努力越好 所有， 如有侵权，请联系我们删除。