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

本文主要是介绍博客园-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);}

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

---

结束

这篇关于博客园-awescnb插件-geek皮肤优化-目录优化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---