悬停时带有 individual 弹出 div 的粘性侧边栏

Question

我有一个带有 4 个图标的粘性侧边栏，悬停时会弹出 dividual "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>

悬停时带有 individual 弹出 div 的粘性侧边栏

Sticky sidebar with individual pop out div on hover

css

html

sticky