CSS 点击事件
:active 伪类向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式。
这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接:在鼠标按钮按下期间,这个链接是激活的。还有其他一些方式来激活元素,另外从理论上讲其他元素也可以被激活,不过 CSS 对此没有定义。
说明
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接,它们会在支持 CSS 的浏览器中以不同的方式显示出来:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后!!
注释:为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!
注释:Pseudo-class(伪类)的名称对大小写不敏感。
注释:伪类可与 CSS 类配合使用:
CSS 点击事件的更多相关文章
- [CSS] 点击事件触发的动画
源码 https://github.com/YouXianMing/CSS-Animations/tree/master/Event 效果 细节 1) 一个完整的可回溯的动画至少包括了两种状态,以及两 ...
- CSS实现点击事件及实践
实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...
- CSS鼠标响应事件经过、移动、点击示例介绍
本文为大家介绍下CSS 鼠标响应事件:鼠标经过CSS.鼠标移动CSS.鼠标点击CSS以及示例,喜欢的朋友可以参考下 几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onM ...
- css禁用鼠标点击事件
css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...
- css处理事件透过、点击事件透过
// 执行一些动作... $("#myModal2").css("pointer-events","none"); // 执行一些动作... ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
- CSS伪类选择器active模拟JavaScript点击事件
一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
- CSS 解决z-index上层元素遮挡下层元素点击事件问题
解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 需求 ...
随机推荐
- 保存chrome主题背景的图片
chrome主题背景的图怎样可以保存下来? 在chrome地址栏中输入: chrome://theme/IDR_THEME_NTP_BACKGROUND?npebkpkiddfadallfhefpip ...
- [UE4]Cast to 转换成纯函数
这样就变成不需要执行线了,可以直接得到转换结果
- MySQL 分区间进行数据展示 实例
如何进行分区间数据统计示例 业务场景:统计消费总金额大于1000元的,800到1000元的,500到800元的,以及500元以下的人数. SELECT COUNT(CASE WHEN IFNULL(t ...
- Pyhton基础知识(一)
Pyhton基础知识(一)一.cpu 内存 硬盘 操作系统之间的关系1.cpu 中央处理器 运算中心与控制中心 相当于人的大脑.2.内存 暂时存储数据 将应用程序加载到内存 以便于cpu进行数据传输交 ...
- php数组和部分操作函数
1. 数组定义 数组的定义使用 array()方式定义,可以定义空数组: <?php $number = array(1,3,5,7,9); //定义空数组 $result = array(); ...
- linux安装phpstorm
1.下载phpStorm安装包,下载地址:https://download.jetbrains.8686c.com/webide/PhpStorm-2018.3.1.tar.gz 2.解压到/usr/ ...
- Oracle递归查询父子兄弟节点
1.查询某节点下所有后代节点(包括各级父节点) 1 // 查询id为101的所有后代节点,包含101在内的各级父节点 2 select t.* from SYS_ORG t start with ...
- android 开发 singleTask启动模式下传值的坑
日常填坑. 做了什么操作引起的?如下: 在活动A 启动模式设置为singleTask ,然后再用活动A启动活动B,活动B启动活动C. 现在我的活动C要使用intent携带值去启动活动A.在活动A中正常 ...
- torando-ioloop生命周期
https://stackoverflow.com/questions/5375220/how-do-i-stop-tornado-web-server?answertab=votes#tab-top ...
- 29.如何不用 transition 和 animation 也能做网页动画
原文地址:https://segmentfault.com/a/1190000014964220 感想:动画效果运用了具有滚动效果的marquee标签 HTML代码: 注释: <!-- mar ...