利用del标签给文章添加一些"黑幕"

在浏览萌娘百科的时候 会时不时的看到文章里有个黑色的小块 当把鼠标移向它的时候 你会发现里面有新日暮里世界(手动滑稽) 这里面通常是有一些梗啊什么的 或者是Wiki编辑者调皮加上的东西 就像这样

想法有了 那怎么在自己的博客里有上这个呢?
Typecho用的是MarkDown解析 为了不改变以前的语法习惯 我选择了向<del>标签开刀
首先要把del标签自有的那个横线干掉 F12之后发现有一个text-decoration属性 去掉横线的方法就是给del标签加上text-decoration:none; 然后用:hover来一顿配合 出来的css就是这样的

del{
    text-decoration:none;
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
del:hover {
    color:#fff;
}

讲一下原理吧 第二行开始目的就是之前说的去掉横线 然后把背景弄成黑的 字也弄成黑色的 保证看不到里面的文字 然后加个:hover之后 鼠标挪上来之后把字的颜色变成白色
那...那个“你知道的太多了”的那个文本呢? 为了保证不仅仅Typecho能用明明是机芯不会用文章replace 其他场景还能用 所以打算用jQuery实现这个过程 原理就是给del标签加上一个title属性 为了减少要一个一个添加的麻烦 所以用这种方式进行

$("del").attr("title","你知道的太多了");

高亮：必须先引用jQuery之后再引用这个 不然用不了
然后就能达到前面图的效果喽~