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悬停效果案例应用
Nov 21 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 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/05/18 PHP
php显示页码分页类的封装
2017/06/08 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
python自动生成证件号的方法示例
2021/01/14 Python
python实现发送邮件
2021/03/02 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
高级Java程序员面试题
2016/06/23 面试题
银行自荐信范文
2013/10/07 职场文书
售后主管岗位职责
2013/12/08 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
给老师的感谢信
2015/01/20 职场文书
清明节随笔
2015/08/15 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
php去除deprecated的实例方法
2021/11/17 PHP
Python绘画好看的星空图
2022/03/17 Python