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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
tensorflow输出权重值和偏差的方法
2018/02/10 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python issubclass 和 isinstance函数
2019/07/25 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
财务会计自荐信范文
2014/02/21 职场文书
党员对照检查材料
2014/09/22 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
python非标准时间的转换
2021/07/25 Python