feat: 侧边栏增加鼠标悬停效果

This commit is contained in:
Argo Zhang 2019-08-16 02:40:57 +08:00
parent c0e85a44dd
commit db24567c8e
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
1 changed files with 16 additions and 7 deletions

View File

@ -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;
}