【问题标题】:How to edit cursor from a css ::first-letter element?如何从 css :: first-letter 元素编辑光标?
【发布时间】:2021-05-16 02:15:26
【问题描述】:

无论如何我都没有自定义我的站点鼠标光标,所以它都是默认的。因此,所有文本在悬停时都会将光标变为“文本选择光标”(this guy > ꕯ)。美好的。然后我设计了我的第一个字母(只是改变了颜色),现在它们(第一个字母)在悬停时具有默认的箭头光标。然后我尝试手动设置光标,但似乎忽略了 css 规则......

我用这个简单的 css 规则为字母设置样式:

::first-letter{
    color: red;
}

然后我尝试为其设置一个新的光标规则,但它不起作用,即使将其设置为 none,箭头光标仍会出现在其上。

::first-letter{
    cursor: none;
    color: red;
}

这与选择文本或输入文本字段中的闪烁光标无关。很简单,鼠标光标在文本上方时会在视觉上发生变化。

【问题讨论】:

  • 虽然您无法更改首字母伪元素中的光标设置,但至少在 Windows 10 上似乎只在 Chrome/Edge 中出现怪癖(它变为箭头)。Firefox 和IE11 都保持“直立”光标,直到您移动到第一个字符的左侧(即超出文本)。我看不出有什么办法可以强制它在 Chrome/Edge 上不进行更改。

标签: html css hover mouse-cursor


【解决方案1】:

As MDN says:

只有一小部分 CSS 属性可以与 ::first-letter 伪元素一起使用

cursor 不是其中之一。

【讨论】:

  • 这太糟糕了,因为它是如此简单......至少看起来我可以设置父级(

    )并且该样式适用于整个文本和第一个字母.

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-21
  • 2013-02-01
  • 1970-01-01
  • 2018-06-06
相关资源
最近更新 更多