底部分页导航

在src\css\custom.css中添加以下代码：

css

a:hover {
  color: #72a1ed;
}

/* 分页导航 */
.pagination-nav__link {
  border: 1px solid #00000000;
  padding: 0.5rem;
  margin: 0 0.5rem;
  transition: all 0.3s ease-in-out;
}

.pagination-nav__link:hover {
  border: 1px solid #72a1ed;
  transform: scaleX(0.9); /* 缩小宽度到 90% */
}

.pagination-nav__label:hover {
  transform: scale(1.1); /* 将元素缩小到原始大小的 80% */
  transition: transform 0.3s ease; /* 平滑过渡效果 */
  display: inline-block; /* 确保元素在缩放时不会破坏布局 */
}

.pagination-nav {
  border: solid #d8d8d8;
  border-width: 2px 0 0;
  margin: 2em 0;
  padding-top: 0.5rem;
}

.pagination-nav__sublabel {
  /* 上一页下一页文字颜色 */
  color: #72a1ed;
}

上一页和下一个hover背景颜色

src\theme\PaginatorNavLink\index.tsx

tsx

export default function PaginatorNavLink(props: Props): JSX.Element {
  const { permalink, title, subLabel, isNext } = props
  return (
    <Link
      className={cn(
        // 上一页和下一个hover背景颜色
        // highlight-next-line
        'pagination-nav__link border-2 border-link hover:bg-[#00000000]',
        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
      )}
      to={permalink}
    >
      {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
      <div className="pagination-nav__label">{title}</div>
    </Link>
  )
}

底部分页导航 ​

底部分页导航