首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >哪种css样式处理按钮上的单击事件?悬停之外的其他

哪种css样式处理按钮上的单击事件?悬停之外的其他
EN

Stack Overflow用户
提问于 2010-10-16 03:04:09
回答 3查看 33.2K关注 0票数 8

我看到这个网站有一个按钮,当我将鼠标悬停在它上面时,背景会发生变化。

当我单击按钮时,按钮底纹反转,即对单击事件做出反应。

这是哪种CSS样式?我知道:hover是用来悬停的,但是点击一下呢?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2010-10-16 03:05:42

CSS不处理事件。

您正在寻找:active伪类,它只用于A标记,而不是按钮。你也可以设置A标签的样式,让它看起来像按钮。

请参阅:http://w3schools.com/CSS/css_pseudo_classes.asp

票数 6
EN

Stack Overflow用户

发布于 2013-02-19 18:01:51

CSS3现在可以处理激活事件(2013)。

:active伪类适用于任何css选择器,如按钮,而不仅仅是A标记。

CSS3样式

代码语言:javascript
运行
复制
p { margin: 2em; }
button { background-color: White; color: SteelBlue; }
button:hover { background-color: LightSteelBlue; }
button:active { background-color: SteelBlue; color: White; }

HTML5

代码语言:javascript
运行
复制
    <p>
        <button>test button with :active pseudo-class</button>
    </p>

演示:http://jsfiddle.net/wp86u/

参见:http://www.w3schools.com/css/css_pseudo_classes.asp (内容自Diodeus answer以来更改)

票数 12
EN

Stack Overflow用户

发布于 2010-10-16 03:39:08

您看到的是浏览器的默认样式:active伪类,它也适用于按钮上的键盘输入(尝试切换到它并按空格键)。

这些伪类不仅仅适用于锚元素,这是一个常见的误解,因为旧版本的IE除了锚元素之外不支持它们。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3945267

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档