粘滯側欄與個別彈出div在懸停

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>