代码片段 → CSS → 让可点击元素显示指针光标 让可点击元素显示指针光标 Chris Coyier 于 2009年8月10日 a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; } 某些可点击元素在浏览器中无法神奇地触发指针光标。本文解决了这个问题,并提供了一个默认类“pointer”,以便根据需要将其应用于其他可点击元素。
我通常不喜欢在按钮等元素上显示指针,感觉…有点不对劲 :o。
我完全不同意,在所有按钮和链接上不显示指针对可用性非常不利。
普通用户不会注意到区别,但你说得对。桌面应用程序的按钮上没有指针。
“这都是关于可供性的。按钮具有很高的可供性,直观地表明了它们的使用方式。当可供性较低时,使用手形指针来指示如何与该项目交互。”
那么在CSS的哪个地方放置这段代码呢?我实际上认为这很巧妙。并不是很多人知道,当链接的颜色不同(没有下划线)时,它是可点击的。
偶然发现了这个 - 也可以这样使用
@DanEden 我认为这只会捕获显式设置了“onclick”属性的元素?这很可惜,因为所有优秀的JavaScript开发者(在我看来)都使用attachEvent或类似的方法来设置onclick事件。
Chris,但这部分建议是否与CSS规范相矛盾,CSS规范(CSS 2.1 推荐和 CSS3 基本 UI LCWD)始终表示
cursor: pointer
“是指针,表示链接”(而不是“可点击的元素”)?Gérard Talbot,W3C CSS 2.1 测试套件作者之一,甚至在W3C邮件列表中写道那么他完全错误了吗?或者在某些情况下改变用户可能已经习惯的光标形状真的不仅有优点,而且还有缺点?这些优点是否足以证明正式违反CSS规范?
我想知道是否将
a[href]
替换为a:link
在性能方面是否更好。我听说在谈论速度时,属性选择器是迄今为止最糟糕的选择器。不错=)
这是一个经典的设计反模式。设计师/开发人员自以为是地认为操作系统和浏览器供应商做错了,并通过改变核心界面行为和用户已经习惯的习惯用法来挑战网页用户的基本假设。
指针/手形光标仅用于链接。我想进一步澄清这一点,针对网页提出建议,此类光标应仅应用于浏览器识别的链接,这几乎只限于href。如果我无法通过中键点击并在新标签页中打开它,那么它就不应该有指针光标。我想到的唯一例外是,当它所使用的按钮不是明显的按钮(可供性低)时 - 尽管这通常是设计不良的结果。
我会将
label[for]
更改为label
,如<label><input type=radio/>label text</label>
所示。无论如何,如果有人需要完整的鼠标光标列表,可以在此处找到并附带示例:通过CSS更改光标
在Firefox 22中,禁用输入字段(例如,在计算框架大小或其他任何内容的表单中)上的
cursor:not-allowed;
仅在字段边缘显示。在版本21中,它仍然可以正常工作。
在IE7-9中,光标仅显示在值区域而不是整个输入字段上。
我想说的是
只要浏览器架构师坚持他们以自我为中心的思想,并且地球上没有一个浏览器能够保持一致并遵循所有W3C建议,关于是否应该在按钮元素上使用
cursor:pointer;
的所有讨论都是毫无意义的。干杯,
noRiddle
我们不知道它是如何工作的。需要简短的解释和示例。
先学习CSS。