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 特效范例整理
Aug 22 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
基于CSS3画一个iPhone
Apr 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 批量更新网页内容实现代码
2010/01/05 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
js实现一键复制功能
2017/03/16 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Python解析json代码实例解析
2019/11/25 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Django admin组件的使用
2020/10/24 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
房屋出租协议书
2014/04/10 职场文书
理想演讲稿范文
2014/05/21 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
酒会开场白大全
2015/06/01 职场文书
公开致歉信
2019/06/24 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL