悬停时带有单独弹出 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>