实现方法：1、使用“:hover”伪 类选择器 ，选择 鼠标指针 浮动在其上的元素，并为其设置其样式，语法“:hover{属性名:属性值}”；2、使用transtion属性，语法“transtion:css属性名称 过度时间;”。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
1、使用 伪类 实现样式切换
伪类是CSS2.1时出现的新特性，让许多原本需要JavaScript才能 做出 来的效果使用CSS就能实现。
比如实现下面的鼠标悬停效果，只要为:hover伪类应用一组新样式即可。当 访客 鼠标移动到按钮上面时，浏览器会自动为按钮应用这新样式。
<!DOCTY PE html>
<html>
<head>
< ;m eta charset="UTF-8">
<style>
.slickButton {
color: wh IT e;
font-weight : bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
}
.slickButton:hover {
color: black;
background: yellow;
}
</style>
</head>
<body>
<button class="slickButton">盼望着，盼望着</button>
</body>
</html>效果：
2、使用CSS3的过渡功能实现 颜色过渡
直接使用伪类虽然实现了样式的 改变 ，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式 平滑 的切换到另一组样式。
下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过渡效果又会发生，颜色恢复到初始状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.slickButton {
color: white;
font-w ei ght: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: background 0.5s, color 0.5s;
- webkit -t ransition: background 0.5s, color 0.5s;
}
.slickButton:hover {
color: black;
background: yellow;
}
</style>
</head>
<body>
<button class="slickButton">盼望着，盼望着</button>
</body>
</html>效果：
推荐学习：css视频教程
以上就是css如何实现鼠标经过样式改变的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css如何实现鼠标经过样式改变 全部内容，希望文章能够帮你解决 css如何实现鼠标经过样式改变 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199772