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实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
使用CSS实现音波加载效果
May 07 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
各种战术和打法的原创者
2020/03/04 星际争霸
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP循环获取GET和POST值的代码
2008/04/09 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
php简单实现快速排序的方法
2015/04/04 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
JavaScript版代码高亮
2006/06/26 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Django中使用group_by的方法
2015/05/26 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
如何设置Java的运行环境
2013/04/05 面试题
幼儿园新学期寄语
2014/01/18 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
主持人大赛开场白
2015/05/29 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL