html - 悬停效果导致图像在悬停时向左浮动

Question

我有一张图片，上面覆盖了某些 Blob ，当鼠标悬停在这些 Blob 上时会弹出信息。我有悬停功能，但是当这些点悬停以显示此信息时，这些点被推到左边而不是留在原地。我不明白为什么，希望得到任何帮助。

  <div class="model">
     <img src="images/baman.png">
  </div> 

  <div id="pain1">
     <img class="pain1" src="images/painspot.png">
     <img class="shoulder" src="images/shoulder.png">
  </div>  

  <div id="pain2">
     <img class="pain2" src="images/painspot.png">
     <img class="back" src="images/back.png">
  </div>

  <div id="pain3">
     <img class="pain3" src="images/painspot.png">
     <img class="hip" src="images/hip.png">
  </div>

CSS:

.model {
  position: absolute;
  right: 500px;
}

 #pain1 {
   position: relative;
   left: 65px;
   top: 130px;
 }

 .shoulder {
  display: none;    
  }

 .pain1:hover + .shoulder {
   display: inline; 
  }

  #pain2 {
   position: relative;
   left: -25px;
   top: 240px;
  }

  .back {
  display: none;    
  }

  .pain2:hover + .back{
    display: inline;
  }

   #pain3 {
    position: relative;
    left: 30px;
    top: 240px;
  }

  .hip {
    display: none;  
  }

  .pain3:hover + .hip{
     display: inline;   
  }

Answer 1

jsfiddle 在这里: jsFiddle

.model {
 /*code*/
}

实现起来并不难，只需要复制粘贴即可；)示例中没有 float 任何元素，您确定您的图像向左浮动吗？如果是这种情况，请确保没有其他代码覆盖。