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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
国际贸易求职信
2014/07/05 职场文书
法学专业求职信
2014/07/15 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
监察建议书
2015/02/04 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
教师病假条范文
2015/08/17 职场文书
python实现简单反弹球游戏
2021/04/12 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫