实现方法：1、使用“:hover”伪类选择器，选择鼠标指针浮动在其上的元素，并为其设置其样式，语法“:hover{属性名:属性值}”；2、使用transtion属性，语法“transtion:css属性名称 过度时间;”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

1、使用伪类实现样式切换
伪类是CSS2.1时出现的新特性，让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。
比如实现下面的鼠标悬停效果，只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时，浏览器会自动为按钮应用这新样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .slickButton {
                color: white;
                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-weight: bold;
                padding: 10px;
                border: solid 1px black;
                background: lightgreen;
                cursor: pointer;
                transition: background 0.5s, color 0.5s;
                -webkit-transition: background 0.5s, color 0.5s;
            }
             
            .slickButton:hover {
                color: black;
                background: yellow;
            }
            </style>
    </head>

    <body>
        <button class="slickButton">盼望着，盼望着</button>
    </body>
</html>

效果：

以上就是css如何实现鼠标经过样式改变的详细内容！

 
  • 本站名称：清风资源网
  • 本站永久地址：www.mcoxn.com
  • 本站提供的源码、模板、插件等等其他资源，除资源本身问题外，都不包含免费技术服务，请大家谅解！
  • 本站资源解压密码一般都为www.mcoxn.com如发现链接失效，请联系在线客服更新。
  • 本站所有代码模板仅供学习交流使用，请勿用于商业用途，及违法侵权行为使用均与本站无关。
  • 源码素材属于虚拟商品，具有可复制性，可传播性，一旦授予，不接受任何形式的退款、换货要求。
  • 本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
  • 本站所有资源来源于公开互联网搜集和网友投稿提供，仅供个人学习研究使用，若本站收录的内容对您的版权或者利益造成损害，请提供相应的资质证明发邮件至kakbga@qq.com我们将于3个工作日内予以删除。