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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
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
实用函数2
2007/11/08 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
js实现数组转换成json
2015/06/26 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python中的包和模块实例
2014/11/22 Python
python中异常捕获方法详解
2017/03/03 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
django实现后台显示媒体文件
2020/04/07 Python
Python3读写ini配置文件的示例
2020/11/06 Python
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
教师专业自荐书范文
2014/02/10 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
驾驶员安全责任书
2014/07/22 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
护士年终考核评语
2014/12/31 职场文书
学校施工安全责任书
2015/01/29 职场文书