如何仅修改网页的default状态光标?
如何仅在default光标场景使用自定义光标,保留系统预设状态光标?
我想为网站的default状态设置自定义光标图片,其余状态(尤其是text状态)保留系统预设光标。但通过以下方式设置时:
html { cursor: url('path/to/custom/cursor.svg') 0 0, default; }
至少text状态光标丢失,段落、文本span、标题等元素都显示自定义光标,而非预设的文本选择光标。
我尝试为特定元素重新定义样式:
p, span, ol, ul, h1, h2, h3, h4 { cursor: text; }
但text状态并非与特定HTML标签绑定,只要存在未被其他修饰符影响的文本节点就会触发。比如如何仅选择纯文本的div,排除包含特定样式子div的div?
已知无法直接选择文本节点,因此我想知道是否有更温和的方法,仅在预设default光标出现的场景使用自定义光标,同时保留所有状态(如text、scroll等)的预设光标。
示例1:设置html光标后,所有状态被覆盖
html { cursor: all-scroll; }
Lorem ipsum dolor sit amet
示例2:重新定义元素样式会出现误判
html { cursor: all-scroll; } /* 困境:应重新定义哪些元素以匹配预设text状态? */ div { cursor: text; }
<div>Lorem ipsum dolor sit amet</div> <div style="width: 100px; height: 100px; background-color: red;"></div>
内容的提问来源于stack exchange,提问作者dgnin
相关产品推荐
相关产品推荐

