Переход CSS к появлению ящиков один за другим при наведении на мышь

Question

Я создал окно социальных сетей, когда вы наведете курсор на кнопку совместного доступа, вы увидите всплывающие окна и покажите значки социальных сетей, теперь это работает отлично, но я хотел перейти на он, поэтому, когда я наводил курсор на кнопку совместного доступа, остальные 4 элемента показывают один за другим с некоторым эффектом перехода.

Эффект, который я ищу, похож на этот site, в верхнем правом углу.

body { 
 
    background: #cdcdcd; 
 
    padding: 150px 0 0 100px; 
 
} 
 
.social-share { 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3); 
 
    color: #34abd2; 
 
    float: left; 
 
    font-size: 18px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 35px; 
 
    cursor: pointer; 
 
} 
 
.social-share > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.social-share > ul > li { 
 
    list-style: none; 
 
} 
 
.social-share > ul > li > i { 
 
    transition: all 0.5s ease 0s; 
 
} 
 
.social-share > ul > li:hover > i { 
 
    -ms-transform: rotate(180deg); 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.social-share > ul > li > ul { 
 
    line-height: none; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    bottom: 35px; 
 
    line-height: normal; 
 
    visibility: hidden; 
 
} 
 
.social-share > ul > li:hover ul { 
 
    visibility: visible; 
 
} 
 
.social-share > ul > li > ul > li { 
 
    list-style: none; 
 
    background-color: #fff; 
 
    margin-bottom: 3px; 
 
    display: inline-block; 
 
    width: 35px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    border-radius: 50%; 
 
} 
 
.social-share > ul > li > ul > li > a { 
 
    color: #fff; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(1) { 
 
    background-color: #3C5A99; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(2) { 
 
    background-color: #229EF1; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(3) { 
 
    background-color: #DD4A40; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(4) { 
 
    background-color: #2FA64A; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="social-share"> 
 
    <ul> 
 
    <li><i class="fa fa-share-alt" aria-hidden="true"></i> 
 
     <ul> 
 
     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Как эта идея, я думаю, что вы ищете это, я только что изменил overflow:visible и добавить некоторые коды

body { 
 
    background: #cdcdcd; 
 
    padding: 150px 0 0 100px; 
 
} 
 
.social-share { 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3); 
 
    color: #34abd2; 
 
    float: left; 
 
    font-size: 18px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 35px; 
 
    cursor: pointer; 
 
} 
 
.social-share:hover { 
 
    overflow:visible; 
 
    transition-duration:1s; 
 
    -moz-transition-duration:1s; 
 
    -ms-transition-duration:1s; 
 
    -webkit-transition-duration:1s; 
 
} 
 
.social-share > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.social-share > ul > li { 
 
    list-style: none; 
 
    overflow:hidden; 
 
} 
 
.social-share > ul > li > i { 
 
    z-index: 1; 
 
    position: relative; 
 
    transition: all 0.5s ease 0s; 
 
} 
 
.social-share > ul > li:hover > i { 
 
    -ms-transform: rotate(180deg); 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.social-share > ul > li > ul { 
 
    line-height: none; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    bottom: 18px; 
 
    line-height: normal; 
 
    height:0; 
 
    overflow:hidden; 
 
    transition-duration:2s; 
 
    -moz-transition-duration:2s; 
 
    -ms-transition-duration:2s; 
 
    -webkit-transition-duration:2s; 
 
} 
 
.social-share > ul > li:hover ul { 
 
    height:173px; 
 
    transition-duration:2s; 
 
    -moz-transition-duration:2s; 
 
} 
 
.social-share > ul > li > i, .social-share > ul > li > ul > li { 
 
    list-style: none; 
 
    background-color: #fff; 
 
    margin-bottom: 3px; 
 
    display: inline-block; 
 
    width: 35px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    border-radius: 50%; 
 
} 
 
.social-share > ul > li > ul > li > a { 
 
    color: #fff; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(1) { 
 
    background-color: #3C5A99; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(2) { 
 
    background-color: #229EF1; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(3) { 
 
    background-color: #DD4A40; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(4) { 
 
    background-color: #2FA64A; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="social-share"> 
 
    <ul> 
 
    <li><i class="fa fa-share-alt" aria-hidden="true"></i> 
 
     <ul> 
 
     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

я думаю transition-delay ваш ответ

body { 
 
    background: #cdcdcd; 
 
    padding: 150px 0 0 100px; 
 
} 
 
.social-share { 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3); 
 
    color: #34abd2; 
 
    float: left; 
 
    font-size: 18px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 35px; 
 
    cursor: pointer; 
 
} 
 
.social-share > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.social-share > ul > li { 
 
    list-style: none; 
 
} 
 
.social-share > ul > li > i { 
 
    transition: all 0.5s ease 0s; 
 
} 
 
.social-share > ul > li:hover > i { 
 
    -ms-transform: rotate(180deg); 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.social-share > ul > li > ul { 
 
    line-height: none; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    bottom: 35px; 
 
    line-height: normal; 
 
    visibility: hidden; 
 
} 
 
.social-share > ul > li:hover ul { 
 
    visibility: visible; 
 
} 
 
.social-share > ul > li > ul > li { 
 
    list-style: none; 
 
    background-color: #fff; 
 
    margin-bottom: 3px; 
 
    display: inline-block; 
 
    width: 35px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    border-radius: 50%; 
 
} 
 
.social-share > ul > li > ul > li > a { 
 
    color: #fff; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(1) { 
 
    background-color: #3C5A99; 
 
    transition-delay: 0ms; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(2) { 
 
    background-color: #229EF1; 
 
    transition-delay: 500ms; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(3) { 
 
    background-color: #DD4A40; 
 
    transition-delay: 1000ms; 
 
} 
 
.social-share > ul > li > ul > li:nth-child(4) { 
 
    background-color: #2FA64A; 
 
    transition-delay: 1500ms; 
 
} 
 

 
.social-share > ul > li:hover > ul > li:nth-child(1) { 
 
    transition-delay: 1500ms; 
 
} 
 
.social-share > ul > li:hover > ul > li:nth-child(2) { 
 
    transition-delay: 1000ms; 
 
} 
 
.social-share > ul > li:hover > ul > li:nth-child(3) { 
 
    transition-delay: 500ms; 
 
} 
 
.social-share > ul > li:hover > ul > li:nth-child(4) { 
 
    transition-delay: 0ms; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="social-share"> 
 
    <ul> 
 
    <li><i class="fa fa-share-alt" aria-hidden="true"></i> 
 
     <ul> 
 
     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

По вашему вопросу и другие ответы, я думаю, вы ищете в следующем.

body { 
 
    background: #cdcdcd; 
 
    padding: 150px 0 0 100px; 
 
} 
 

 
.social-share { 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3); 
 
    color: #34abd2; 
 
    float: left; 
 
    font-size: 18px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 35px; 
 
    cursor: pointer; 
 
} 
 

 
.social-share > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.social-share > ul > li { 
 
    list-style: none; 
 
} 
 

 
.social-share > ul > li > i { 
 
    transition: all 0.5s ease 0s; 
 
} 
 

 
.social-share > ul > li:hover > i { 
 
    -ms-transform: rotate(180deg); 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 

 
.social-share > ul > li > ul { 
 
    line-height: none; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    bottom: -3px; 
 
    line-height: normal; 
 
    z-index: -1; 
 
} 
 

 
.social-share > ul > li:hover ul { 
 
    bottom: 35px; 
 
    z-index: auto; 
 
    height: 150px; 
 
} 
 

 
.social-share > ul > li > ul > li { 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    bottom: 0; 
 
    display: inline-block; 
 
    height: 35px; 
 
    left: 0; 
 
    line-height: 35px; 
 
    list-style: outside none none; 
 
    margin-bottom: 3px; 
 
    position: absolute; 
 
    transition: all 0.3s linear 0s; 
 
    width: 35px; 
 
} 
 

 
.social-share > ul > li > ul > li > a { 
 
    color: #fff; 
 
} 
 

 
.social-share > ul > li > ul > li:nth-child(1) { 
 
    background-color: #3C5A99; 
 
} 
 

 
.social-share > ul > li:hover > ul > li:nth-child(1) { 
 
    bottom: 3px; 
 
} 
 

 
.social-share > ul > li > ul > li:nth-child(2) { 
 
    background-color: #229EF1; 
 
} 
 

 
.social-share > ul > li:hover > ul > li:nth-child(2) { 
 
    bottom: 41px; 
 
} 
 

 
.social-share > ul > li > ul > li:nth-child(3) { 
 
    background-color: #DD4A40; 
 
} 
 

 
.social-share > ul > li:hover > ul > li:nth-child(3) { 
 
    bottom: 79px; 
 
} 
 

 
.social-share > ul > li > ul > li:nth-child(4) { 
 
    background-color: #2FA64A; 
 
} 
 

 
.social-share > ul > li:hover > ul > li:nth-child(4) { 
 
    bottom: 117px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="social-share"> 
 
    <ul> 
 
    <li><i class="fa fa-share-alt" aria-hidden="true"></i> 
 
     <ul> 
 
     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> 
 
     <li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>