MediaWiki:Common.css
跳转到导航
跳转到搜索
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer或Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:按 Ctrl-F5。
/* ============================================
基础链接悬停效果
============================================ */
/* 1. 页面内链接 - 平滑变色加下划线 */
a {
transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
a:hover {
color: #d4532a; /* 醒目橙红色 */
text-decoration-color: #d4532a;
}
/* 2. 外部链接 - 添加右箭头动画 */
a.external {
transition: all 0.3s ease;
}
a.external:hover {
padding-right: 4px;
color: #2a6b9e;
}
a.external:hover::after {
content: " →";
transition: all 0.3s ease;
}
/* 3. 导航栏链接 - 背景高亮 */
#mw-panel a,
#p-navigation a {
display: block;
padding: 4px 8px;
border-radius: 4px;
transition: background-color 0.25s ease, padding-left 0.25s ease;
}
#mw-panel a:hover,
#p-navigation a:hover {
background-color: #eaf3ff;
padding-left: 12px;
}
/* 4. 页面标题 - 微缩放 */
#firstHeading {
transition: transform 0.3s ease;
}
#firstHeading:hover {
transform: scale(1.02);
color: #2a4b7a;
}
/* 5. 信息框或卡片样式悬停 */
.infobox,
.wikitable {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.infobox:hover,
.wikitable:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
/* 6. 图片悬停 - 轻微放大和阴影 */
.thumb img,
.image img {
transition: transform 0.4s ease, box-shadow 0.4s ease;
border-radius: 4px;
}
.thumb img:hover,
.image img:hover {
transform: scale(1.02);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* 7. 按钮悬停效果(如有自定义按钮类) */
.mw-ui-button {
transition: all 0.3s ease;
}
.mw-ui-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* 8. 目录列表悬停 - 左移效果 */
#toc li {
transition: padding-left 0.2s ease;
}
#toc li:hover {
padding-left: 8px;
color: #2a6b9e;
}
/* 9. 分类链接悬停 - 背景色块 */
#catlinks a {
padding: 2px 6px;
border-radius: 3px;
transition: background-color 0.3s ease;
}
#catlinks a:hover {
background-color: #d9e8ff;
}
/* 10. 编辑区链接工具条(如编辑、查看历史等) */
#p-views a,
#p-cactions a {
transition: background-color 0.3s ease, border-radius 0.3s ease;
padding: 2px 8px;
}
#p-views a:hover,
#p-cactions a:hover {
background-color: #f0f8ff;
border-radius: 4px;
}