悬停时悬停框向下浮动

Question

我在这个 site 上工作，密码是 joint123 ，当我们将鼠标悬停在图标上时，您可以在右侧看到带有图标的地图显示相应的加法器。它正在显示，但是当我们将鼠标悬停在下方图标时，页脚 div 也在移动 down.what 可能是问题所在？请帮忙！！

这是我的 html 和 css

 .cont-map {
   background: url('http://beta.jointviews.com/wp-content/uploads/2015/01/map1.png')no-repeat;
   width: 590px;
   float: right;
 }
 .box1,
 .box2,
 .box3,
 .box4,
 .box5,
 .box6 {
   display: none;
 }
 .img-1:hover .box1,
 .img-2:hover .box2,
 .img-3:hover .box3,
 .img-4:hover .box4,
 .img-5:hover .box5,
 .img-6:hover .box6 {
   display: block;
   background: white;
   border: 1px solid;
   padding: 10px;
   /*width:250px;*/
   float: right;
 }
 .img-1,
 .img-2,
 .img-3,
 .img-4,
 .img-5,
 .img-6 {
   width: 300px;
 }
 .box1 p img,
 .box2 p img,
 .box3 p img,
 .box4 p img,
 .box5 p img,
 .box6 p img {
   width: 50px;
 }
 .p-1 {
   height: 50px;
   padding-top: 130px;
   margin-left: 39.5%;
   font-size: 4px;
   line-height: 1px;
 }
 .p-2 {
   height: 50px;
   padding-top: 155px;
   margin-left: 29.5%;
 }
 .p-3 {
   height: 50px;
   padding-top: 33px;
   margin-left: 39.5%;
 }
 .p-4 {
   height: 10px;
   margin-left: 36.5%;
 }
 .p-5 {
   margin-left: 36.5%;
 }
 .p-6 {
   margin-top: -49px;
   margin-left: 38.2%;
 }

<div class="cont-map">
  <div class="p-1">
    <div class="img-1">
      <img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
      <div class="box1">
        <p>
          <img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Regional Office: Noida B-81, Sector -65 Noida, UP – 201301 India
        </p>
      </div>
    </div>
  </div>
  <div class="p-2">
    <div class="img-2">
      <img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
      <div class="box2">
        <p>
          <img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Corporate Office: Pune 315 Aurora Tower Camp Pune-411001, Maharashtra India
        </p>
      </div>
    </div>
  </div>
  <div class="p-3">
    <div class="img-3">
      <img src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
      <div class="box3">
        <p>
          <img style="float:left;" src="http://beta.jointviews.com/wp-    content/uploads/2015/01/edsys-logo1.png">Marketing Office: Bangalore Caravel Tower #13/15/2, S.T. Bd Area Koramangala, Bengaluru India
        </p>
      </div>
    </div>
  </div>
  <div class="p-4">
    <div class="img-4">
      <img src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
      <div class="box4">
        <p>
          <img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Associate office: Calicut M.S.S Complex Cherooty Road Kozhikode, India</p>
      </div>
    </div>
  </div>
  <div class="p-5">
    <div class="img-5">
      <img src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
      <div class="box5">
        <p>
          <img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Regional Office: Cochin Velayudhan vaidyans`s building, Padma Jn., M.G. Road Kochi – 682 035 India
        </p>
      </div>
    </div>
  </div>
  <div class="p-6">
    <div class="img-6">
      <img src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
      <div class="box6">
        <p>
          <img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Regional Office: Trivandrum Edsys Towers, Kamaleswaram Thiruvananthapurum -695009 India
        </p>
      </div>
    </div>
  </div>
</div>

Answer 1

框仍在流中，因此当它们可见时它们会将页脚向下推。尝试：

.box1, .box2, .box3, .box4, .box5, .box6 {
    position: absolute;
}

这将使他们脱离流程。

Answer 2

您必须将框设置为绝对位置，以便它浮动在页面上方而不是占用 space。

style.css，行：2161

 .box1, .box2, .box3, .box4, .box5, .box6 {
   display: none;
   position: absolute; /* add this line */
 }

Answer 3

试试这个...

.img-1,.img-2,.img-3,.img-4,.img-5,.img-6 {width: 300px;position:relative;}
.box1,.box2,.box3,.box4,.box5,.box6 {display: none;position:absolute;top:30px;left:0;}

悬停时悬停框向下浮动

hover box floating down while hovering

html

css

hover