目录悬停和激活样式
- 添加样式路径:src\css\custom.css
/* 样式规则适用于所有的 .table-of-contents__link 元素 */
.table-of-contents__link {
border-radius: 8px; /* 圆角边框 */
margin-top: -0.5rem; /* 上边距,调整元素的垂直位置 */
padding: 0.3rem 0 0.3rem 1rem; /* 内边距,顶部和底部 0.3rem,左侧 1rem */
font-weight: 550; /* 字体加粗 */
transition: 0.25s !important; /* 过渡效果,设置样式变化的过渡时间 */
}
/* 鼠标悬停时的样式 */
.table-of-contents__link:hover,
.table-of-contents__link:hover code {
background-color: rgba(4, 184, 145, 0.395); /* 背景颜色,带透明度 */
color: #333; /* 字体颜色 */
}
/* 激活状态下的样式 */
.table-of-contents__link--active,
.table-of-contents__link--active code {
background-color: #00d7a8; /* 背景颜色 */
color: #FFF; /* 字体颜色 */
}