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垂直手风琴菜单
Jun 28 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 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
最省空间的计数器
2006/10/09 PHP
几种显示数据的方法的比较
2006/10/09 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
元旦联欢会感言
2014/03/04 职场文书
出纳担保书范文
2014/04/02 职场文书
调解协议书
2014/04/16 职场文书
升职演讲稿范文
2014/05/23 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
525心理健康活动总结
2015/05/08 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技