style(carousel): 优化首屏轮播图切换按钮交互与贴边排版,杜绝文字遮挡

这个提交包含在:
wikiboss
2026-10-08 17:52:39 +08:00
父节点 2a4ac0a798
当前提交 567fd4bbdb

查看文件

@@ -412,13 +412,13 @@ img {
opacity: 1; opacity: 1;
} }
/* 轮播图左右悬浮控制按钮 (高定毛玻璃气泡) */ /* 轮播图左右悬浮控制按钮 (优雅悬停显现,不遮挡正文) */
.nhc-carousel-nav { .nhc-carousel-nav {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 52px; width: 48px;
height: 52px; height: 48px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
@@ -432,21 +432,29 @@ img {
z-index: 10; z-index: 10;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
opacity: 0;
pointer-events: none;
}
.nhc-carousel:hover .nhc-carousel-nav {
opacity: 0.85;
pointer-events: auto;
} }
.nhc-carousel-prev { .nhc-carousel-prev {
left: 36px; left: 18px;
} }
.nhc-carousel-next { .nhc-carousel-next {
right: 36px; right: 18px;
} }
.nhc-carousel-nav:hover { .nhc-carousel-nav:hover {
opacity: 1 !important;
background: var(--primary); background: var(--primary);
color: #FFFFFF; color: #FFFFFF;
border-color: var(--primary); border-color: var(--primary);
transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.08);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
} }