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

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

另一个注意事项是，您应该使用right属性来定位工具提示（span元素），处于隐藏状态right 关于 200%（因为您的2个div #championsbig和#playersbig具有相同的宽度），而在显示的状态下，right应为关于 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; 
}

工具提示会更改少量图像的位置

1 个答案:

Demo.