Fatal编程技术网

jQuery弹出/弹出

jquery css

jQuery弹出/弹出,jquery,css,Jquery,Css,我有11个图像在一行，我想弹出出来，如果鼠标悬停在其中一个。因此，每11张图像都有一个不同的弹出窗口。我已经有了一些代码来做这件事，但它只会在第一个图像上工作 代码： index.html <span title="Milestones" class="tl-icon"> <span class="tl-msg"> <span class="tl-msg-inside"> <div class="slice1"> <a id=

我有11个图像在一行，我想弹出出来，如果鼠标悬停在其中一个。因此，每11张图像都有一个不同的弹出窗口。我已经有了一些代码来做这件事，但它只会在第一个图像上工作

代码： index.html

<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-inside">
<div class="slice1">
        <a id="slice1">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice2">
        <a id="slice2">Slice 2</a>
        <em style="top: -70px; display: none;">------</em>
</div>
<div class="slice3">
        <a id="slice3">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice4">
        <a id="slice4">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice5">
        <a id="slice5">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice6">
        <a id="slice6">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice7">
        <a id="slice7">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice8">
        <a id="slice8">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice9">
        <a id="slice9">RSS Feed</a>
        <em style="top: -70px; display: none;">---</em>
</div>
<div class="slice10">
        <a id="slice10">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice11">
        <a id="slice11">RSS Feed</a>
        <em style="top: -70px; display: none;">-----</em>
</div>
</span>
tooltop.js（使弹出窗口弹出的代码，对于每个弹出窗口/图像也是一个）

为什么弹出窗口只出现在第一张图片上？

我已经对这些图片做了一些测试。虽然我没有获得正确的时间线结构（可能是因为我缺少显示时间线的上下文的CSS），但我获得了显示添加此CSS声明的弹出窗口：

div {position: relative;}
否则，
em
s的
position:absolute
声明将整个页面（或最接近的封闭相对定位元素）作为参考，从而将弹出窗口呈现在屏幕外（因为垂直位置为-60）

我已经用这些做了一些测试。虽然我没有获得正确的时间线结构（可能是因为我缺少显示时间线的上下文的CSS），但我获得了显示添加此CSS声明的弹出窗口：

div {position: relative;}
否则，
em
s的
position:absolute
声明将整个页面（或最接近的封闭相对定位元素）作为参考，从而将弹出窗口呈现在屏幕外（因为垂直位置为-60）

只需一条注释，您可以通过将所有幻灯片div包装到幻灯片容器div中并添加如下代码，而不是对每个幻灯片id$（“#containerdiv div”）.each（arr，function（）{$（（“this”）.hover（function（）{$（this）.next（“em”）.stop（true，true）.animate来极大地限制js代码({opacity:“show”，top:“-60”}，“slow”）；}，function（）{$（this）.next（“em”）.animate（{opacity:“hide”，top:“-70”}，“fast”）；}）；只是一个注释，您可以通过将所有幻灯片div包装到幻灯片容器div中，并添加类似下面的代码，而不是对每个幻灯片id$（“#containerdiv div”）.each（arr，function（）{$（（“this”）.hover（function（）{$（this）。next（“em”）.stop（true，true）。动画来极大地限制js代码({opacity:“show”，top:“-60”}，“slow”）；}，function（）{$（this）.next（“em”）.animate（{opacity:“hide”，top:“-70”}，“fast”）；}）另一件事是有一种方法来集中它，所以它是在图像的中心？你的意思是，中心弹出窗口？如果是这样的话，也许你需要考虑然后重新设置相对于文档的坐标。为了获得你需要使用的坐标，调用<代码> OffStices（）在div的jQuery包装上，在
左侧的
值中，减去弹出图像的一半宽度，然后添加div的一半宽度（您可以在其上调用
width（）
，作为对象的jQuery包装。
offset（）
是相对于文档左上角计算的。谢谢。还有一件事，我已将弹出窗口更改为另一个稍大的图像，它与时间轴重叠。我如何解决这个问题，以及为什么其他图像没有出现这种情况？知道为什么会出现这种情况吗？如果它在垂直方向上重叠，您需要增加偏移量：在60和70之间，用更大的数值。绝对值更大。这是有效的。非常感谢。还有一种方法可以使它居中，所以它位于图像的中心？你的意思是，弹出窗口的中心？如果是这样的话，也许你需要考虑设置相对于坐标的坐标。要获取需要使用的坐标，请在div的jQuery包装上调用
offset（）
，并在
左侧的
值中，减去弹出图像的一半宽度，然后添加div的一半宽度（您可以在其上调用
width（）
，作为对象的jQuery包装。
offset（）
是相对于文档左上角计算的。谢谢。还有一件事，我已将弹出窗口更改为另一个稍大的图像，它与时间轴重叠。我如何解决这个问题，以及为什么其他图像没有出现这种情况？知道为什么会出现这种情况吗？如果它在垂直方向上重叠，您需要增加偏移量：在显示-60和-70的地方，使用更大的数字。我的意思是绝对值更大。

div {position: relative;}