替换HTML内容并在悬停时还原

Question

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

我想用JS或CSS做以下事情：

• 保留默认的HTML表格
• 通过javascript将原始内容切换为ASCII 219 /＆amp; block /█
的序列
• 让它切换到＆＃34;原创＆＃34;每个区块的内容（例如＆＃34;上周与J.Oliver的上周）都在徘徊。

对此方法的任何帮助或更有效的方法表示赞赏。谢谢！

编辑/类似的代码可能会为我做，我唯一想念的是＆＃34;原创内容＆＃34;字：

div:hover span {display:**ORIGINAL CONTENT**}
div:hover:before {content:"█████"}

Answer 1

你可以用CSS获得类似的效果 - 在单元格上设置相同的颜色和背景，然后在悬停时切换到可读的东西：

.red {
  color: red;
  background-color: red;
}

.blue {
  color: blue;
  background-color: blue;
}

.revealer:hover td {
  color: black;
  background-color: white;
}

<div class="revealer">
  <table>
    <tr>
      <td class="red">One</td>
      <td class="blue">Two</td>
    </tr>
    <tr>
      <td class="red">Three</td>
      <td class="blue">Four</td>
    </tr>
  </table>
</div>

Answer 2

如果您包含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;
}