Javascript 替换HTML内容并在悬停时恢复

我有一个HTML表格，里面有两种颜色的短句。 我想用相应颜色的条覆盖文本，当每个块悬停时，内容必须恢复到其原始HTML状态

我想使用JS或CSS执行以下操作：

• 保持默认HTML表不变
• 通过javascript将原始内容切换为ASCII 219/&块/█
• 当每个区块（例如“上周今晚与J.Oliver合作”）悬停时，将其切换到“原始”内容

感谢您对本方法或更有效方法的任何帮助。谢谢

编辑/类似的代码可能对我有用，我唯一错过的是“原始内容”一词：

---

您只需使用CSS即可获得类似效果-在单元格上设置相同的颜色和背景，然后切换到鼠标悬停时可读的内容：

.red{
颜色：红色；
背景色：红色；
}
蓝先生{
颜色：蓝色；
背景颜色：蓝色；
}
.展示者：悬停td{
颜色：黑色；
背景色：白色；
}

一个
两个
三
四

如果包含jQuery，这将执行您最初请求的操作：

$(function(){
$('td').each(function(idx){
    $(this).data().originaltext = $(this).text();
    $(this).html(fill_with_blocks($(this).data().originaltext));
})
$('td').hover(function(){
    $(this).html($(this).data().originaltext);
},
function(){
    $(this).html(fill_with_blocks($(this).data().originaltext));
});
});
function fill_with_blocks(str) {
    var blocks = '';
    for(var i = 0;i<str.length;i++){
        blocks += '&#9608;';
    }
    return blocks;
}

$（函数（）{
$（'td'）。每个（函数（idx）{
$（this）.data（）.originaltext=$（this）.text（）；
$（this.html）（用_块（$（this.data（）.originaltext））填充_）；
})
$（'td'）。悬停（函数（）{
$（this.html（$（this.data（）.originaltext））；
},
函数（）{
$（this.html）（用_块（$（this.data（）.originaltext））填充_）；
});
});
函数用_块（str）填充_{
var块=“”；
对于（var i=0；这是一个聪明的方法，但我想不出一个方法来适应多色div！请参见第一个框，“上周今晚与J.Oliver”：您可以使用类似于
div:hover td{…}的内容，而不是
td:hover
更新了示例，当
div悬停时显示整个表格。这可能会起作用！我应该只编辑它，使悬停时“一”和“三”文本颜色为红色，“二”和“四”文本颜色为蓝色。我现在就试试！好的，就是这样！我只需要编辑css:
。revealer:hover td{.blue.color:blue；.red.color:red；背景色：白色；}
谢谢！
$(function(){
$('td').each(function(idx){
    $(this).data().originaltext = $(this).text();
    $(this).html(fill_with_blocks($(this).data().originaltext));
})
$('td').hover(function(){
    $(this).html($(this).data().originaltext);
},
function(){
    $(this).html(fill_with_blocks($(this).data().originaltext));
});
});
function fill_with_blocks(str) {
    var blocks = '';
    for(var i = 0;i<str.length;i++){
        blocks += '&#9608;';
    }
    return blocks;
}