CSS实现鼠标滑过鼠标点击代码写法
发布时间：2016-12-26 11:07:16 作者：佚名 
我要评论
我要评论本文给大家分享css代码实现鼠标滑过鼠标点击的写法，非常不错，具有参考借鉴价值，需要的朋友参考下吧
鼠标滑过元素，使得元素的样式发生改变
我们定义一个按钮标签
复制代码
代码如下:<button class="px-button">BUTTON</button>
我们首先设置按钮的背景颜色为灰色：
复制代码
代码如下:.px-button{
background-color: grey;
}
我们要使得鼠标滑过按钮的时候，让其变为蓝色，我们只需要增加hover选择器：
复制代码
代码如下:.px-button：hover{
background-color: blue;
}
我们要使得鼠标点击按钮的时候，让其变为红色，我们只需要增加active选择器：
复制代码
代码如下:.px-button：active{
background-color: red;
}
以上所述是小编给大家介绍的CSS实现鼠标滑过鼠标点击代码写法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了纯CSS3实现鼠标滑过按钮动画第二节,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-16- 这篇文章主要为大家详细介绍了CSS3制作炫酷带方向感应的鼠标滑过图片3D动画，具有一定的参考价值，并兼容目前最新的各类主流浏览器，感兴趣的小伙伴们可以参考一下2016-03-16
- 这篇文章主要为大家分享了8组超炫酷纯CSS3鼠标滑过图片动画效果，每一个动画效果都很精彩，值得大家学习借鉴，感兴趣的小伙伴们可以参考一下2016-03-16
- 关于星星评分效果大家一定都不会陌生，当鼠标滑过的时候会使相应的星星变得高亮，下面就介绍一下如何利用css实现鼠标滑过五角星高亮效果，对此功能感兴趣的朋友一起学习吧2016-01-20
- 这篇文章主要为大家介绍了纯CSS实现鼠标滑过显示子菜单的二级菜单效果,通过简单的css针对hover设置实现鼠标滑过显示二级菜单的功能,具有一定参考借鉴价值,需要的朋友可以参2015-09-14
- 鼠标滑过文字弹出一段说明文字CSS实现，无JS代码，下面代码直接拷贝了就可用2014-05-20
- 弹出层想必大家都有见到过吧，在以前或许是使用js实现的，不过现在我们可以使用纯css来实现了，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-16
- 鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过css来实现，感兴趣的朋友，不要错过2013-10-12
- 鼠标滑过改变文字的效果想必很多朋友都有遇到过吧，本文为大家介绍下css是如何实现的，感兴趣的朋友可以了解下2013-09-09
这篇文章主要介绍了使用css的filter写鼠标滑过效果的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-08-13
最新评论