fengjun/ag-index
1
0
Fork 0
Code Activity

header hover事件

Browse Source
This commit is contained in:
fengjun
2025-12-19 16:59:50 +08:00
parent 5d554a6d57
commit acea143fc5
1 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
assets/css/style.css
View File

@@ -1956,6 +1956,46 @@ img {
color: #1481ff !important;
}
/* 三级菜单项 hover 动效 */
.site-header #navbar .product-menu > .sub-menu .sub-menu li {
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 6px;
margin: 2px 0;
overflow: hidden;
}
.site-header #navbar .product-menu > .sub-menu .sub-menu li::after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(0);
width: 3px;
height: 60%;
background: linear-gradient(180deg, #1481ff, #00d4ff);
border-radius: 0 3px 3px 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header #navbar .product-menu > .sub-menu .sub-menu li:hover {
background: linear-gradient(90deg, rgba(20, 129, 255, 0.08), transparent);
padding-left: 8px;
}
.site-header #navbar .product-menu > .sub-menu .sub-menu li:hover::after {
transform: translateY(-50%) scaleY(1);
}
.site-header #navbar .product-menu > .sub-menu .sub-menu li:hover a {
color: #1481ff !important;
transform: translateX(4px);
}
.site-header #navbar .product-menu > .sub-menu .sub-menu a {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 解决方案菜单 - 只有二级菜单的样式 */
.site-header #navbar > ul > li.solution-menu > a::after {
content: '';
@@ -2008,6 +2048,46 @@ img {
.site-header #navbar .solution-menu > .sub-menu > li > a:hover {
color: #1481ff !important;
}
/* 解决方案菜单项 hover 动效 */
.site-header #navbar .solution-menu > .sub-menu > li {
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 8px;
overflow: hidden;
}
.site-header #navbar .solution-menu > .sub-menu > li::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 60%;
height: 2px;
background: linear-gradient(90deg, #1481ff, #00d4ff);
border-radius: 2px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header #navbar .solution-menu > .sub-menu > li:hover {
background: linear-gradient(180deg, rgba(20, 129, 255, 0.06), rgba(20, 129, 255, 0.02));
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(20, 129, 255, 0.1);
}
.site-header #navbar .solution-menu > .sub-menu > li:hover::after {
transform: translateX(-50%) scaleX(1);
}
.site-header #navbar .solution-menu > .sub-menu > li > a {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header #navbar .solution-menu > .sub-menu > li:hover > a {
color: #1481ff !important;
transform: scale(1.02);
}
}
@media (max-width: 991px) {