鼠标悬停效果设置

文章发布时间:

最后更新时间:

文章总字数:
337

今天将背景图替换完后发现原本主题跟背景不适配，于是想要将原本主题的一些效果进行改变。
我先对主页面的post区域进行修改，将其每个文章的框线进行去除，然后改变了highlight的颜色，将其设置为符合背景的颜色，接着将旁边的时间调整成为白色，使其更加显眼。
但这样调整完发现鼠标悬停在文章框上时显示不够明显，于是决定对文章框进行修改，使其在鼠标悬停时有更加明显的提示效果。
打开custom.css,将代码打入文本最下方即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 重新定义文章卡片的悬停效果 */
.recent-post {
  border: 1px solid transparent !important;      /* 设置透明边框，为悬停效果做准备 */
  box-shadow: none !important; /* 移除默认阴影 */
  background: rgba(255, 255, 255, 0.05) !important; /* 设置半透明背景 */
  border-radius: 8px !important; /* 添加圆角 */
  transition: all 0.3s ease !important; /* 添加过渡动画 */
}

/* 鼠标悬停时的效果 */
.recent-post:hover {
  border: 1px solid #2fe6ff !important; /* 悬停时显示青色边框 */
  background: rgba(47, 230, 255, 0.1) !important; /* 悬停时背景变为青色半透明 */
  box-shadow: 0 4px 15px rgba(47, 230, 255, 0.3) !important; /* 添加青色发光效果 */
  transform: translateY(-2px) !important; /* 轻微上移效果 */
}