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 相关文章推荐
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 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中截取字符串支持utf-8
2007/01/18 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Django中ORM的基本使用教程
2020/12/22 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
小学后勤管理制度
2014/01/14 职场文书
股东合作协议书
2014/04/14 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
农民工讨薪标语
2014/06/26 职场文书
党支部意见范文
2015/06/02 职场文书
导游词幽默开场白
2019/06/26 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
详解Python中的for循环
2022/04/30 Python