Question

我有一个span元素，它在文本中多次出现，它总是有一个子<img>元素，它通过这些样式充当可缓存的图像工具提示;

.tooltipLink img {
  float:left;
  display:none;
}
.tooltipLink:hover img{
  display:inherit;
  position:absolute;
  z-index:1000;
  overflow:hidden;
  border-radius: 13px;
}

文本为<span className="tooltipLink">something like this<img src="linkToImg.jpg"></span>。我现在开始将这些跨度添加到我自己滚动的页面的一部分（它是一个带有max-height:500px和overflow-y:scroll的div），并且悬停在此div中的跨度上会向下发出可怕的偏移结果，通常导致图像在页面上不可见。我尝试了各种layout个关键字，但实际上并没有解决这个问题。当div一直滚动到顶部时，它很好，但是开始向下滚动div以显示其他跨度，并且工具提示图像逐渐向下移动到页面下方，直到它完全消失。

如果我将位置更改为inherit，它至少会接近触发它的范围，但它会将文本推到一边而不是悬停在它上面（尽管z-index）。这是我到目前为止最接近的。

Answer 1

你的.tooltipLink有position:relative吗？

.tooltipLink {
  position:relative;
}

<强> demo

在滚动div中将鼠标指针悬停在工具提示图像附近？

1 个答案: