0
我有一个4个图标粘滞边栏弹出单个“div”是我需要而不是悬停在它弹出的图标上包含div在我的情况div class = “sticky-bx”在一起。我只使用CSS来做的效果,是否有可能与CSS单独做或我必须使用jQuery?粘滞侧栏与个别弹出div在悬停
<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;}
张贴工作代码段 – LGSon
这里是工作代码的链接片断http://codepen.io/cloudzedge/pen/ZpONqy –