gpt4 book ai didi

javascript - 将工具提示与公共(public)段落的左边距对齐

转载 作者:行者123 更新时间:2023-11-29 21:49:04 26 4
gpt4 key购买 nike

我有 CSS3 定义的工具提示,形式为 <a><span class="tooltip">tooltip text</span>link text</a> .当指针悬停在链接上时,将显示工具提示,相对于相应链接的开头放置。不过,我希望每个工具提示的左边框与包含所有相关链接的段落的左边框对齐。

这是 fiddle :https://jsfiddle.net/9xk2zvLy/10

fiddle 中有两个工具提示,它们应该跟随链接的 y 位置。然而,它们也有不同的 x 位置。我希望两者都与段落水平对齐。

可以使用 javascript 完成吗?我尝试了以下方法:

  for(var i = 0; i < balloons.length; ++i) {
var b = balloons[i];
b.style.left = -b.parentNode.offsetLeft + "px";
}

和不同的变化; bspan与工具提示。奇怪的是,有些变体有时似乎有效,即工具提示准确地出现在它应该出现的位置,但只是偶尔出现。

最佳答案

I would like, though, the left border of each tooltip to be aligned with the left border of the paragraph, which contains all of the links in question.

这正是正在发生的事情,因为你有 <span class="translation" />相对于 <a> 绝对定位标签。你的第二个<a>标签以 C'était... 开头,在本例中是句子中间,所以这是 <span> 的位置翻译也对齐。

尝试设置 display: table;

a.tooltip:hover .translation {
display: table;
opacity: 1.0;
visibility: visible;
}

关于javascript - 将工具提示与公共(public)段落的左边距对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30080612/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com