feat: 侧边栏增加鼠标悬停效果
This commit is contained in:
parent
c0e85a44dd
commit
db24567c8e
|
@ -82,7 +82,7 @@ aside {
|
|||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
aside .nav-brand {
|
||||
aside .nav-brand, .sidebar-open aside:hover .nav-brand {
|
||||
height: 55px;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px #ddd;
|
||||
|
@ -97,7 +97,7 @@ aside {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
aside .nav-brand img {
|
||||
aside .nav-brand img, .sidebar-open aside:hover .nav-brand img {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 2.75rem;
|
||||
|
@ -156,7 +156,7 @@ aside {
|
|||
display: block;
|
||||
}
|
||||
|
||||
aside .sidebar {
|
||||
aside .sidebar, .sidebar-open aside:hover .sidebar {
|
||||
top: 139px;
|
||||
transition: top .3s linear;
|
||||
}
|
||||
|
@ -165,7 +165,7 @@ aside {
|
|||
transition: width .3s linear;
|
||||
}
|
||||
|
||||
aside .nav-brand, aside .nav-header {
|
||||
aside .nav-brand, .sidebar-open aside:hover .nav-brand, aside .nav-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
@ -174,13 +174,13 @@ aside {
|
|||
border-bottom: solid 1px rgba(221, 221, 221, 0.5);
|
||||
}
|
||||
|
||||
aside .nav-header img {
|
||||
aside .nav-header img, .sidebar-open aside:hover .nav-header img {
|
||||
width: 3.75rem;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
aside .nav-header span {
|
||||
aside .nav-header span, .sidebar-open aside:hover .nav-header span {
|
||||
color: #eee;
|
||||
margin-left: 0.625rem;
|
||||
}
|
||||
|
@ -193,6 +193,11 @@ aside {
|
|||
transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease;
|
||||
}
|
||||
|
||||
.sidebar-open aside:hover {
|
||||
width: 210px;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.sidebar-open .header {
|
||||
margin-left: 3.375rem;
|
||||
}
|
||||
|
@ -212,11 +217,15 @@ aside {
|
|||
width: 2.25rem
|
||||
}
|
||||
|
||||
.sidebar-open aside .nav-brand img {
|
||||
.sidebar-open aside .nav-brand img, .sidebar-open aside:hover .nav-brand span, .sidebar-open aside:hover .nav-header span, .sidebar-open aside:hover .nav-item span {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.sidebar-open aside:hover .nav-link i + span {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-open aside .sidebar {
|
||||
top: 115px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue