Sticky sidebar с индивидуальным pop out div on hover

Question

У меня есть липкая боковая панель с 4 значками, которые на паре выталкивают индивидуальный «div» - это то, что мне нужно, вместо этого наведите курсор на значок, который он выскочит, содержащий div в моем случае div class = «sticky-bx» все вместе. я использовал css только для того, чтобы сделать эффект, возможно ли это сделать с помощью CSS только или мне нужно использовать jquery?

<div class="sticky-bx"> 
    <div class="hover-bx"> 
      <div class="ico-bx" id="sbx1"> 
       <i class="fa fa-2x fa-phone-square"></i> 
      </div> 
      <div class="ico-txt" id="sbt1"> 
       <span>Call Back</span> 
      </div> 
    </div><br><br> 
    <div class="hover-bx"> 
      <div class="ico-bx" id="sbx2"> 
       <i class="fa fa-2x fa-pencil-square-o"></i> 
      </div> 
      <div class="ico-txt" id="sbt2"> 
       <span>Book An Appointment</span> 
      </div> 
    </div><br><br> 
    <div class="hover-bx"> 
      <div class="ico-bx" id="sbx3"> 
       <i class="fa fa-2x fa-calendar"></i> 
      </div> 
      <div class="ico-txt" id="sbt3"> 
       <span>Camps & Events</span> 
      </div> 
    </div><br><br> 
    <div class="hover-bx"> 
      <div class="ico-bx" id="sbx4"> 
       <i class="fa fa-2x fa-globe"></i> 
      </div> 
      <div class="ico-txt" id="sbt4"> 
       <span>Virtual Tour</span> 
      </div> 
    </div><br><br> 
    </div> 



.sticky-bx { 
position: fixed; 
z-index: 400; 
right: 0px; 
top: 30%; 
padding: 16px; 
background-color: #fff; 
border-bottom-left-radius: 6px; 
border-top-left-radius: 6px; 
-webkit-box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.10); 
-moz-box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.10); 
box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.10); 
min-width: 60px;} 

.hover-bx { 
width: auto; 
position: static; 
background-color: #fff;} 

.ico-bx { 
float: left;} 

.ico-txt { 
width: auto; 
margin-left: 10px; 
float: left; 
padding: 6px; 
display: none;} 

.ico-bx:hover + .ico-txt,.ico-txt:hover { 
display: block; 
position: relative; 
z-index: 500px;} 

Answer 1

Вам нужно изменить пару вещей:

• Переставьте зависать в hover-bx
• Установить цвет фона для каждого элемента, а не на sticky-bx
• Использование direction поскольку вы идете от right-to-left

Оставленный для вас сделайте, устраните пробелы и сделайте так, чтобы он выглядел хорошо.

.sticky-bx { 
 
    position: fixed; 
 
    right: 0px; 
 
    top: 30%; 
 
    padding: 16px; 
 
    width: 60px; 
 
    direction: rtl; 
 
} 
 
.hover-bx { 
 
    direction: ltr; 
 
    display: inline-block; 
 
    background-color: #aeaeae; 
 
    white-space: nowrap; 
 
} 
 
.ico-bx { 
 
    display: inline-block; 
 
} 
 
.ico-txt { 
 
    margin-left: 10px; 
 
    padding: 0 6px; 
 
    display: none; 
 
} 
 
.hover-bx:hover .ico-txt { 
 
    display: inline-block; 
 
    position: relative; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="sticky-bx"> 
 
    <div class="hover-bx"> 
 
    <div class="ico-bx" id="sbx1"> 
 
     <i class="fa fa-2x fa-phone-square"></i> 
 
    </div> 
 
    <div class="ico-txt" id="sbt1"> 
 
     <span>Call Back</span> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="hover-bx"> 
 
    <div class="ico-bx" id="sbx2"> 
 
     <i class="fa fa-2x fa-pencil-square-o"></i> 
 
    </div> 
 
    <div class="ico-txt" id="sbt2"> 
 
     <span>Book An Appointment</span> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="hover-bx"> 
 
    <div class="ico-bx" id="sbx3"> 
 
     <i class="fa fa-2x fa-calendar"></i> 
 
    </div> 
 
    <div class="ico-txt" id="sbt3"> 
 
     <span>Camps & Events</span> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="hover-bx"> 
 
    <div class="ico-bx" id="sbx4"> 
 
     <i class="fa fa-2x fa-globe"></i> 
 
    </div> 
 
    <div class="ico-txt" id="sbt4"> 
 
     <span>Virtual Tour</span> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
</div>