我想演示一个实时文本过滤器模型。
我实现了一个实时文本荧光笔，它利用更新在中输入的文本，并将其复制到后面的。通过在背景中添加标记来突出显示文本。
它遵循以下示例的样式：(排除了实时文本和高亮显示更新，以避免不必要的混淆，因为问题只与样式有关(
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* {
font-family: sans-serif;
font-size: 10pt;
font-weight: normal;
}
.wrapper {
position: relative;
width: 400px;
height: 400px;
outline: solid 1px #666;
}
.wrapper>* {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.highlighter {
background-color: #fff;
color: #fff;
}
.highlight {
background-color: #9ff;
color: #9ff;
}
textarea {
background-color: transparent;
border: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>所以现在我想在高亮显示的文本上添加一个悬停的css，但我在这一点上被卡住了，因为标记在后面，我可以访问：hover css for标记。
我希望问题是清楚的，任何投入都将受到赞赏。
尝试使用contenteditable。因为通过这种方式，您可以直接在文本字段中输入html标记并与它们交互。例如悬停
.wrapper{
height:10rem;
width:10rem;
border:1px solid;
}
.highlight {
background:aqua;
}
.highlight:hover {
background:red;
}<div class="wrapper" contenteditable="true">
This <span class="highlight">is a</span> demonstration.
</div>