Question

我有一个带有4个图标的粘性侧边栏，在悬停时弹出个人＆＃34; div＆＃34;是我需要的，而不是悬停在它弹出的图标上，包含div在我的案例div class =＆＃34; sticky-bx＆＃34;全部一起。我只用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

留给你做，修复差距，让它看起来再好看。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

粘贴侧边栏，悬停时单独弹出div

1 个答案: