css - 悬停时带有单独弹出div的粘性侧边栏

我有一个带有4个图标的粘性侧边栏，在鼠标悬停时会弹出单个“ 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;}

最佳答案

您需要更改几件事：


将鼠标移到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>

关于css - 悬停时带有单独弹出div的粘性侧边栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39554407/