Question

我有一张图像上面有一些斑点，当悬停在这些斑点上时会弹出信息。我有悬停工作但是当斑点悬停在显示这些信息时，斑点被推到左边而不是留在原地。我不明白为什么，并希望得到任何帮助。

  <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*/
}

不难实现，只能复制和粘贴;）在示例中没有浮动任何元素，您确定您的图像浮动了吗？如果是这种情况，请确保没有其他代码覆盖。

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

1 个答案: