yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 头像下拉菜单hover间隙修复 鼠标平滑滑入
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2026-03-20 20:50:22 +08:00
parent 71ede045b3
commit ec2dca619a
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
css/common.css
View File

@@ -171,15 +171,20 @@ header:hover {
.user-dropdown { .user-dropdown {
display: none; display: none;
position: absolute; position: absolute;
top: calc(100% + 8px); top: 100%;
right: 0; right: -10px;
min-width: 140px; min-width: 140px;
padding-top: 10px;
z-index: 1000;
}
.user-dropdown-inner {
background: #1F2937; background: #1F2937;
border-radius: 12px; border-radius: 12px;
padding: 6px 0; padding: 6px 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1000; position: relative;
} }
.user-avatar-wrap:hover .user-dropdown { .user-avatar-wrap:hover .user-dropdown {
@@ -187,7 +192,7 @@ header:hover {
} }
/* 下拉箭头 */ /* 下拉箭头 */
.user-dropdown::before { .user-dropdown-inner::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -6px; top: -6px;

2
public/header.html
View File

@@ -48,11 +48,13 @@
<div class="user-avatar-wrap"> <div class="user-avatar-wrap">
<div class="user-avatar" id="headImg"></div> <div class="user-avatar" id="headImg"></div>
<div class="user-dropdown"> <div class="user-dropdown">
<div class="user-dropdown-inner">
<div class="user-dropdown-item" id="accountBtn" data-i18n="menu_account">个人资料</div> <div class="user-dropdown-item" id="accountBtn" data-i18n="menu_account">个人资料</div>
<div class="user-dropdown-item" id="logout" data-i18n="menu_logout">退出登录</div> <div class="user-dropdown-item" id="logout" data-i18n="menu_logout">退出登录</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 移动端汉堡菜单按钮 --> <!-- 移动端汉堡菜单按钮 -->
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation"> <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation">
<img src="/web/BlackFruit-web/assets/img/header/bar.svg" alt="Menu" class="mobile-menu-icon"> <img src="/web/BlackFruit-web/assets/img/header/bar.svg" alt="Menu" class="mobile-menu-icon">