CSS中如何实现鼠标悬停效果?

在CSS中,您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。

下面是一个简单的例子,展示了如何在鼠标悬停时改变文本颜色和背景颜色:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mouse Hover Example</title>
   <style>
        .hover-effect {
            color: black;
            background-color: white;
            padding: 10px;
            text-align: center;
        }
 
        .hover-effect:hover {
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="hover-effect">Hover over me!</div>
</body>
</html>

在这个例子中,我们创建了一个名为.hover-effect的类,并在其中设置了默认的文本颜色(color: black;)和背景颜色(background-color: white;)。接着,我们使用:hover伪类为悬停时的文本颜色和背景颜色分别设置为白色和蓝色。当您将鼠标悬停在<div>元素上时,将看到这些颜色的变化。

相关推荐
三小河19 分钟前
教你发布一个npm的组织包
前端
青椒a31 分钟前
002.nestjs后台管理项目-数据库之prisma(上)
前端
米诺zuo31 分钟前
react 中的useContext和Provider实践
前端·react.js
asdfsdgss32 分钟前
Angular CDK 自适应布局技巧:响应式工具实操手册
前端·javascript·angular.js
袁煦丞1 小时前
【私人导航员+内网穿透神器】Sun-Panel × cpolar让NAS变身你的数字管家:cpolar内网穿透实验室第564个成功挑战
前端·程序员·远程工作
爱吃的强哥1 小时前
Electron_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
袁煦丞1 小时前
开启SSH后,你的NAS竟成私有云“变形金刚”:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作
IT_陈寒1 小时前
SpringBoot 3.2新特性实战:这5个隐藏功能让我开发效率提升50%
前端·人工智能·后端
申阳2 小时前
2小时个人公司:一个全栈开发的精益创业之路
前端·后端·程序员
用户9873824581012 小时前
5. view component
前端