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

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