javascript - 我如何知道浏览器为特定元素设置的光标样式

Question

在使用“cursor: auto”CSS 值时，我如何知道浏览器为特定元素设置了哪种光标样式？

我想知道当鼠标悬停在某个元素上时，“auto”对该元素的计算结果是什么。

element.style.cursor 只返回“自动”，而我想知道悬停元素时的评估值(“文本”、“指针”...)。

在鼠标悬停监听器中:

let cursorStyle = window.getComputedStyle(e.target, null).cursor;
console.log(cursorStyle); // outputs "auto", not "text" when hovering a div / p with text

Answer 1

我猜你根本没有机会。根据规范，光标的默认 CSS 值是 auto(请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)，这意味着浏览器会自行处理。

您的脚本运行良好并为您提供了正确的答案(cursor 样式属性的值)。在自动模式下，浏览器逻辑上不会更新属性(好吧，auto 保持auto，不会每次都改变)。

也许有一些技巧可以根据悬停的对象来猜测光标，但实现起来会非常痛苦。