- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试添加带有伪元素:after
的下划线来注释一些文本。
我的问题是,我想强调下划线。在此示例中,这是短语“实际上确实可以...”和“ ...不起作用”。
.test {
margin-top: 60px;
}
span.annotation {
position: relative !important;
display: inline-block !important;
}
span.annotation:hover {
cursor: pointer;
box-shadow: none;
}
span.annotation:after {
content: '';
position: absolute;
left: -.15em;
width: calc(100% + .5em);
transition: all .2s;
height: 3px;
}
span.annotation.firstLevel:after {
z-index: -3;
bottom: -0.5em;
}
span.annotation.secondLevel:after {
z-index: -2;
bottom: -0.2em;
}
span.annotation.thirdLevel:after {
z-index: -1;
bottom: 0.1em;
}
span.annotation:hover:after {
width: calc(100% + 1em);
content: attr(title);
text-align: center;
font-size: 8px;
color: #444;
}
span.annotation.firstLevel:hover:after {
height: calc(100% + 2.3em) !important;
}
span.annotation.secondLevel:hover:after {
height: calc(100% + 1.9em) !important;
}
span.annotation.thirdLevel:hover:after {
height: calc(100% + 1.6em) !important;
}
span.additionalType:after {
background: gold;
}
span.annotation.testA:after {
background: gainsboro;
}
span.annotation.testB:after {
background: deepskyblue;
}
span.annotation.testX:after {
background: gold;
}
span.annotation.testC:after {
background: deeppink;
}
span.annotation.testD:after {
background: tomato;
}
span.annotation.testE:after {
background: greenyellow;
}
<div class="test">
This is <span title="TestA" class="annotation testA firstLevel"><span title="TestB" class="annotation testB secondLevel"><span title="TestC" class="annotation testC thirdLevel">pretty good example</span> for the</span> <span title="TestD" class="annotation testD secondLevel">Text Annotation</span> but <span title="TestX" class="annotation testX thirdLevel">actually <span title="TestE" class="annotation secondLevel testE">it</span> do not work</span></span>
</div>
最佳答案
这似乎是一个堆栈上下文问题。将z-index:0
添加到注释元素以隔离每个元素的上下文,并避免让所有:after
属于同一堆叠上下文。
.test {
margin-top: 60px;
}
span.annotation {
position: relative !important;
display: inline-block !important;
z-index:0;
}
span.annotation:hover {
cursor: pointer;
box-shadow: none;
}
span.annotation:after {
content: '';
position: absolute;
left: -.15em;
width: calc(100% + .5em);
transition: all .2s;
height: 3px;
}
span.annotation.firstLevel:after {
z-index: -3;
bottom: -0.5em;
}
span.annotation.secondLevel:after {
z-index: -2;
bottom: -0.2em;
}
span.annotation.thirdLevel:after {
z-index: -1;
bottom: 0.1em;
}
span.annotation:hover:after {
width: calc(100% + 1em);
content: attr(title);
text-align: center;
font-size: 8px;
color: #444;
}
span.annotation.firstLevel:hover:after {
height: calc(100% + 2.3em) !important;
}
span.annotation.secondLevel:hover:after {
height: calc(100% + 1.9em) !important;
}
span.annotation.thirdLevel:hover:after {
height: calc(100% + 1.6em) !important;
}
span.additionalType:after {
background: gold;
}
span.annotation.testA:after {
background: gainsboro;
}
span.annotation.testB:after {
background: deepskyblue;
}
span.annotation.testX:after {
background: gold;
}
span.annotation.testC:after {
background: deeppink;
}
span.annotation.testD:after {
background: tomato;
}
span.annotation.testE:after {
background: greenyellow;
}
<div class="test">
This is <span title="TestA" class="annotation testA firstLevel"><span title="TestB" class="annotation testB secondLevel"><span title="TestC" class="annotation testC thirdLevel">pretty good example</span> for the</span> <span title="TestD" class="annotation testD secondLevel">Text Annotation</span> but <span title="TestX" class="annotation testX thirdLevel">actually <span title="TestE" class="annotation secondLevel testE">it</span> do not work</span>
</span>
</div>
关于html - 嵌入跨度和伪元素的问题:之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54582611/
序言:重新训练人工智能大型模型是一项复杂且高成本的任务,尤其对于当前的LLM(大型语言模型)来说,全球99.99%的企业难以承担。这是因为模型训练需要巨大的资源投入、复杂的技术流程以及大量的人力支
上一篇:《人工智能是这样理解“情绪”的》 序言:这段话要优化吗?““嵌入”是一种将句子、单词或其他语言单位转换为向量表示的技术。这个向量通常位于高维空间中,它以一种能够表达相似性的方式编码出文本
我正在开发一个小型 Web 应用程序,其中有一个 object 元素(包含一个 embed),用于显示小型文档。 文档可以是 PDF 或纯文本文件 (.txt),我以 base64 字符串的形式从 W
我有一种小型语言,它基本上是 OCaml 的扩展(实际上它是 OCaml 子集的扩展,但这并不重要)。为了简化事情,我有一个“转义”表达式,可以将 OCaml 文字传输到我的语言中(因此您可以将任意
据我所知,我知道 embed tag用于嵌入来自 youtube 等网站的视频,object tag用于 Flash 视频和 video tags下HTML5 .但我很好奇这些标签的深入细节以及作为开
我假设您可以将 WebKit 嵌入到另一个桌面应用程序中并向其发送一个字符串,例如: Hello world! 它将显示在窗口内。 我的问题是,如果我将其压缩表示(JPEG 转储)加载到内存中,我该如
有没有一种可能的方式,我可以从youtube检索我的最新视频的列表(带有缩略图),使用cron作业将嵌入的代码存储在数据库中,这样我就可以在单独的页面上显示视频,而不是将用户引向youtube观看视频
最近我发现我的网站上嵌入的 YouTube 视频存在问题 - 全屏按钮不再起作用。确实有过一次。该按钮是可见的,但单击时没有任何反应。 我正在使用 Youtube Javascript API 将视频
在 Keras 内置函数中嵌入使用哪种算法?Word2vec?手套?其他? https://keras.io/layers/embeddings/ 最佳答案 简短的回答是都不是。本质上,GloVe 的
在 LSTM 上用于建模 IMDB 序列数据 ( https://github.com/fchollet/keras/blob/master/examples/imdb_lstm.py ) 的 ker
在机器学习中,通常用 one-hot-encoding 表示分类(特别是:名义)特征。 .我正在尝试学习如何使用 tensorflow 的嵌入层来表示分类问题中的分类特征。我有 tensorflow
我有一个使用 Storyboard的应用程序,我想在我的主视图中有一个 View ,并让它在场景中的不同 View 之间切换。 所以目前我有“容器对象”,我可以在其中嵌入另一个 viewControl
在我的项目中我遇到了这样的情况。 function fonsubmit() { alert('Out side PHP'); //Here the php code starts
我正在尝试添加一个JFileChooser,它选择父目录并允许用户输入文件名称。我知道 showSaveDialog 和 showOpenDialog 方法,但我不想创建新窗口。 这是我到目前为止所拥
我注意到我的网站创建了这样的链接:www.domain.com/post-name/embed/ 恐怕这可能会影响 SEO。是否可以禁用此功能? 最佳答案 显然这是默认的 WordPress 行为。此
我试图从 C 代码调用 python 函数,我遵循了 here 中的示例 我也有正确的包含文件目录、库目录和链接 python32.lib(我使用 python 32)但是错误是 python/C A
我正在使用基于云的 EDR 平台来监控客户端受损网络上发生的进程。我最近经常看到的是使用选项“-Embedding”调用的 msiexec.exe C:\Windows\System32\MsiExe
我有一个列表,其中包含数百万个需要嵌入的句子。我正在使用 Flair以此目的。这个问题似乎应该是并行的。但是,当我尝试优化时,我的性能要么没有提高,要么只是停滞不前。 我将我的句子定义为一个简单的字符
我想在我的应用程序中添加嵌入的 YouTube 视频:我该怎么做?我有这个 import 'package:youtube_player/youtube_player.dart'; import 'p
我有 json 看起来像: myjson = {"queries":{"F.SP": 27}} 所以与 queryResults = JObject.Parse(jsonString) 我可以 fir
我是一名优秀的程序员,十分优秀!