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

尚寂新
尚寂新
2018/02/05 19:40

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

demo
demo

想法有了 那怎么在自己的博客里有上这个呢?
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之后再引用这个 不然用不了
然后就能达到前面图的效果喽~

已有 10 条评论 (旧评论在前)
  1. c0sMx
    回复
    2018-02-05  由 Linux 发表

    文章质量不错,会常常来玩的~

    1. 尚寂新
      回复
      尚寂新
      2018-02-06  由 Windows 7 发表

      也就是没事水水而已23333

  2. 神偷
    回复
    神偷
    2018-02-09  由 iPad 发表

    干货 收藏了

    1. 神偷
      回复
      神偷
      2018-02-09  由 iPad 发表

      果断收藏

  3. 品牌策划
    回复
    2018-02-24  由 Windows 7 发表

    心慌的感觉

  4. Roogle
    回复
    2018-05-05  由 Windows 10 / 11 发表

    暂定为技术贴MARK一下,你最好回复我,否则Mark不成功

    1. 尚寂新
      回复
      尚寂新
      2018-05-05  由 Windows 10 / 11 发表

  5. 南蜇
    回复
    2019-07-11  由 macOS 发表

    这个!扒!(逃~

  6. Kane
    回复
    2019-11-28  由 macOS 发表

    哈哈,学到了。不过感觉这个主题的底部布局过于紧凑了,没有模块感。

    1. 尚寂新
      回复
      尚寂新
      2019-11-30  由 华为手机 发表

      其实...footer区目前也没什么好想法,暂时能看下眼就行吧😂

添加新评论 (Markdown Supported)
😉
@[吃瓜] @[大哭] @[斗鸡眼滑稽] @[尴尬] @[滑稽] @[惊哭] @[惊叹] @[镜像滑稽] @[开心] @[狂汗滑稽] @[卖萌] @[胖次滑稽] @[喷] @[受虐滑稽] @[痛饮] @[微笑滑稽] @[笑喷] @[笑眼] @[阴险] @[装酷滑稽]