CSS实现鼠标滑过鼠标点击代码写法


Posted in HTML / CSS onDecember 26, 2016

鼠标滑过元素,使得元素的样式发生改变

我们定义一个按钮标签

复制代码
代码如下:

<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实现鼠标滑过鼠标点击代码写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
学做Bootstrap的第一个页面
May 15 #HTML / CSS
css3实现背景模糊的三种方式
HTML5如何适配 iPhone IOS 底部黑条
CSS3画一个阴阳八卦图
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
详解CSS样式中的 !important * _ 符号
You might like
PHP 高手之路(一)
2006/10/09 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
JS二分查找算法详解
2017/11/01 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python查看模块,对象的函数方法
2018/10/16 Python
python中return的返回和执行实例
2019/12/24 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
怎样写演讲稿
2014/01/04 职场文书
邮政员工辞职信
2014/01/16 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
售后服务承诺函格式
2015/01/21 职场文书
暑期实践个人总结
2015/03/06 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
学生安全责任协议书
2016/03/22 职场文书
go xorm框架的使用
2021/05/22 Golang
Python使用Kubernetes API访问集群
2021/05/30 Python
浅谈Redis缓冲区机制
2022/06/05 Redis