html - 工具提示改变了一些图像的位置

Question

我正在构建一个网站，但我的代码遇到了另一个问题。 我有大量图像的工具提示，因此当您将鼠标悬停在它们上方时，您会在工具提示中看到信息(这也是图像)

我的问题是，当我将鼠标悬停在前几张图片上时，它们显示的工具提示与其余图片不同。

我的代码是这样的:

.playertooltipimg{
    width: 400px;
    height: auto;
}
.playertooltipimg {
 z-index: 100000;
}
a.tooltips {
  position: relative;
  display: inline;

}
a.tooltips span {
  position: absolute;
  visibility: hidden;
  opacity: 0; 
  border: 5px solid white;
  left:-80.15em;

  transition: all 1s ease-in-out;
}

a:hover.tooltips span {
  position: absolute;
  left:-51.15em;
  top: -0.2em;


  visibility: visible;

  opacity: 1;
  transition: all 1s ease-in-out;


  z-index: 999;
}

我认为很难理解我的意思，这就是我创建这个 jfiddle 的原因:

但是你必须调整窗口的大小，使 2 个白框可以并排(排成一行)

http://jsfiddle.net/ZkQLV/

我知道它有很多代码，我不明白为什么要这样做，因为除了前几个图像之外的所有其他图像都正确显示了工具提示

Answer 1

您的问题是由于对 a(预览元素的容器)使用了 inline 和 relative 样式引起的。 inline 样式使得内部 span 的绝对定位有点奇怪，你可以看到第二行的所有元素似乎都可以正常工作，它只发生在元素上在第一行(最后一项除外)。但是，如果您为 a 元素设置 display:inline-block ，您会发现悬停在所有元素上现在不起作用，弹出的工具提示有a 元素(您将鼠标悬停在其上)的偏移量始终相同(在左侧)。那是因为您为 a 元素设置了 position:relative。所以 span 的所有偏移量(left 和 top)(您使用 将其设置为相对于字体大小的一些固定值>em 单位)将与悬停的 a 元素的位置进行比较。要解决此问题，您必须为设置偏移量的所有元素选择相同的元素。最合适的元素正是包含所有元素的 div #playersbig。要选择该 div 作为内部 span 元素(在每个元素中)的包含 block ，您必须将其 position 设置为 relative(你已经完成了)但是你必须移除应用于a元素的position:relative。

另一个注意事项是你应该使用 right 属性来定位你的工具提示(span 元素)，在隐藏状态下 right 是 < strong>about 200%(因为你的 2 div #championsbig 和 #playersbig 有相同的宽度)，而在显示状态下，右边 应该大约 100%。 right 的确切值取决于您的 2 个 div #championsbig 和 #playersbig 之间的填充/空间宽度，看起来它是关于 4px 在你的情况下)。您也可以使用calc 函数来设置精确值但是一些旧版本的浏览器(尤其是所谓的IE)不支持它，所以我只是在演示中分别使用201%和101%(因为宽度是400px)。如果 width 固定为 400px，您还可以自己计算出 right 的精确值，例如 804px 和404px 而不是 201% 和 101%。

CSS:

a.tooltips {  
  /* use this to have the expected absolute positioning 
     instead of the unexpected behavior when using inline style */
  display: inline-block;  
}

a.tooltips span {
  position: absolute;
  visibility: hidden;
  opacity: 0; 
  border: 5px solid white;
  top:0;
  /* use right instead of left, this will hide the tooltip initially */
  right:201%;  
  transition: all 1s ease-in-out;    
}

a:hover.tooltips span {
  position: absolute;
  /* this will show the tooltip on hovering */
  right:101%;  
  visibility: visible;  
  opacity: 1;
  transition: all 1s ease-in-out;
  z-index: 999; 
}

Demo.