我希望仅当用户将鼠标悬停在段落的第一行上时,才将该段落的第一行设置为粗体.我try 了一些类似的方法:

p::first-line:hover {
    font-weight: bold;
}

请注意,这个问题与另一个Stack Overflow question个问题不同.引用的问题是,当用户将鼠标悬停在标记的任何部分上时,如何使段落的第一行加粗.我的问题是,当用户只将鼠标悬停在第一行上时,如何使第一行加粗.

推荐答案

你try 的方式每the relevant CSS specification次都是正确的:

例如,由于:hover伪类指定它可以应用于任何伪元素,所以当第一行悬停时::first-line:hover将匹配.

然而,这一特定的功能组合还没有在任何浏览器(例如Firefox v123和Chromium v123)中实现.您可以随意使用此Stack代码片段进行测试;当它工作时,您将知道您的浏览器已经实现了该功能:

p::first-line:hover {
    color: blue;
}
<p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

future ,浏览器可能会支持这一点,届时可以更新这一答案.同时,您需要使用JavaScript来实现该功能.

Css相关问答推荐

如何让CSS过渡应用时宽度增加,而不是减少?

隐藏div后缺少div的InnerHTML

如何允许在bslb中 Select 输入重叠卡片?

以百分比形式输入的css宽度属性不会生效

R SHINY:FILL CONTAINER=TRUE时调整DT数据表高度,

如何使用TailwindCSS溢出?

VueJS3+Vutify中缺少一些CSS类

如何在Bootstrap 5上使用移动设备居中内容?

如何在相对位置和绝对位置之间转换元素?

最多 2 行的 Flex 水平滚动

CSS 字符串变量的正确null值是多少?

用css画3个三角形

如何仅包装左侧内容

为什么不能将特定于供应商的伪元素/类组合成一个规则集?

CSS中的旋转地球

在表格中使用自动换行:断词

CSS:在图像周围创建白光

div内的CSS中心内容

如何根据容器大小设置字体大小?

仅当存在 2 个类时,您可以使用 CSS 定位元素吗?