如何仅通过HTML和CSS实现双击后更改光标样式？

可以仅通过HTML和CSS实现双击后更改光标样式，核心是利用CSS的:target伪类结合锚点机制，配合过渡延迟区分单击与双击行为，具体方案如下：

1. HTML结构 #

给目标元素设置可作为锚点的ID，同时添加一个隐藏的锚点链接用于触发双击行为：

<div id="slide-arrow-prev" tabindex="0">← 上一页</div>
<a id="double-click-target" href="#slide-arrow-prev"></a>

• tabindex="0" 确保<div>能获得焦点，保证交互触发的有效性。
• 隐藏的锚点链接用于触发目标元素的:target状态。

2. CSS样式实现 #

/* 默认样式 */
#slide-arrow-prev {
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid #ccc;
    display: inline-block;
    /* 设置过渡延迟，区分单击（短时间内恢复）和双击（触发target） */
    transition: cursor 0s 0.2s;
}

/* 单击激活时的光标样式 */
#slide-arrow-prev:active {
    cursor: not-allowed;
    transition: none; /* 单击时取消延迟，立即生效 */
}

/* 双击触发后的光标样式 */
#slide-arrow-prev:target {
    cursor: grab;
    transition: none; /* 双击触发后直接应用样式 */
}

/* 隐藏锚点链接，不影响页面布局 */
#double-click-target {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

原理说明 #

• 单击行为：点击元素时active伪类立即生效，光标切换为not-allowed；松开鼠标后，若未在0.2秒内触发第二次点击，过渡延迟会让光标恢复为默认样式。
• 双击行为：第二次点击会触发锚点跳转，使目标元素匹配:target伪类，此时光标切换为grab，且该样式会保持到页面其他锚点被触发或URL中的hash被移除。
• 0.2秒的延迟是通用的双击间隔阈值，可根据需求调整数值。

内容的提问来源于stack exchange，提问作者bkw