悬停在一个预-如何突出一个简单的CSS单行？
悬停在一个预-如何突出一个简单的CSS单行？
提问于 2015-05-05 18:02:09
我有一些<pre>块。
是否可以只使用CSS来突出显示在它们上方的单行呢？
==更新==
下面是一些示例代码：
<pre>
#include <stdio.h>
int main()
{
printf("Hello World");
return 0;
}
</pre>当线变长时，在悬停时突出显示它们是有用的。
源文件不能通过PHP读取，否则我会将其分割成单独的<pre>行，只需一个简单的pre:hover CSS即可。
pre:nth-child不是解决方案，因为代码行不是CSS意义上的“子”。
pre:first-line可以工作，但当然只适用于第一行。
==更新2 ==
由于CSS似乎仅限于first-line，多亏了Zeke的建议，我找到了一种几乎简单的方法来获得我想要的东西。
HTML：
<pre id="raw">
#include <stdio.h>
int main()
{
printf("Hello World");
return 0;
}
</pre>
<!-- 1×1 transparent PNG for the onload -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=" onload="PreHover()" />CSS：
#pre div:hover {
background: #ff0;
}香草Javascript：
function PreHover() {
var output = '';
var preBox = document.getElementById('raw');
var txt = preBox.innerHTML.split('\n');
for(var x=0;x<txt.length-1;x++) {
output = output + '<div>'+txt[x]+'</div>';
}
preBox.innerHTML = output;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-05 18:58:15
这将帮助您为每一行包装div。
var txt = $('pre').html().split("\n");
var output = "";
for(var x=0;x<txt.length-1;x++)
output = output + "<div>"+txt[x]+"</div>";
}
$('pre').html(output);您可以编写一行css用于突出显示：
pre div:hover { background-color: rgba(0,0,0,0.2); }Note：这需要jQuery
可选：添加white-space:nowrap以防止包装每一行
，为什么这么做？
因为如果只有<pre>，它将是一个DOM元素，其中只包含文本，您可以在其中作为一个整体进行更改，而不是逐行进行更改。
要使对每一行都有更好的控制，可以通过操纵<pre>中包含的文本来构建一个新的DOM元素，pre包含许多div，其中每一行包含一行文本。现在您可以掌握每个div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30060097
复制相关文章
相似问题
腾讯云开发者
