用css实现鼠标移过某个元素使元素的样式发生变化

最新推荐文章于 2023-06-02 17:44:04 发布

茂茂睡不醒

最新推荐文章于 2023-06-02 17:44:04 发布

阅读量2.5k

点赞数 2

分类专栏： JS 文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_44029226/article/details/113359018

版权

JS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

用css实现鼠标移过某个标签使标签的样式发生变化

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教

在很多项目里面都会有这样一个功能，那就是鼠标飘过某个元素时，元素的样式发生变化，这里我们就用到了hover来进行实现
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            display: block;
            margin-top: 50px;
            text-align: center;
        }
        a:hover{
            color: #ffb4ab;
            font-size: 30px;
        }
    </style>
</head>
<body>
<a href="#">滑过</a>
</body>
</html>

代码解释

这里我们直接创建了个a标签，然后对其样式进行设置，先display：block把它变为块元素，因为这样就可以移动他的位置，方便我们操作，然后取消下滑线（个人感觉下划线不好看）
然后就a:hover 这里是对鼠标滑过a标签时的啊标签的样式，我们改变他的颜色和字体，这样效果更易观察。

演示效果：

滑过之前

在这里插入图片描述

滑过过后

在这里插入图片描述

别喷我，写的不好就劳烦指点一二，觉得有帮助就留下个大拇指点个关注再走哈哈哈！

茂茂睡不醒

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
3
评论
用css实现鼠标移过某个元素使元素的样式发生变化

用css实现鼠标移过某个标签使标签的样式发生变化正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教在很多项目里面都会有这样一个功能，那就是鼠标飘过某个元素时，元素的样式发生变化，这里我们就用到了hover来进行实现代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫