博客园-awescnb插件-geek皮肤优化-目录优化

简介

博客园-awescnb插件-geek皮肤下，文章内容目录显示优化：鼠标移入显示、目录展开/收起图标。

⭐优化

鼠标移入显示

• 定义自定义CSS
  博客园->管理->设置->页面定制 CSS 代码
  添加代码

#catalog ul li a:hover {background: rgba(80, 80, 80, .04);color: #807dd4;}

鼠标移入展示不同背景

展开/收起图标

• 定义自定义CSS
  博客园->管理->设置->页面定制 CSS 代码
  添加代码

h3.catalog-title:before {content: '';position: relative;display: block;right: 10px;}
h3.catalog-title:after {font-weight: 900;transform: rotate(90deg);content: "\25B2";font-variant: normal;text-rendering: auto;display: flex;background: 0 0;position: absolute;top: 0;bottom: 0;right: 15px;justify-content: center;align-items: center;transition: transform .2s ease, -webkit-transform .3s ease;font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;}
h3.catalog-title.is-active:after{transform: rotate(180deg);}

为目录前增加图标
目录展开/收起增加图标及切换动画

---

结束