css - 弹出信息操作点随着打开阅读更多... div 而移动

Question

好的，我得到了一个 jquery 代码，其中包含阅读更多... div 在循环中工作(wordpress 分类法)。唯一的问题是，无论何时我按下阅读更多...弹出窗口的开关也会向下移动。

示例:http://cloud0815.joloshop.com/shops/karstadt

如果您打开隐藏的 div(只需按:“mehr Infos zum Gutschein..”)并将鼠标悬停在弹出信息下方的优惠券代码上，则不会打开(就像在第一个蓝色代码框上一样)而是切换向下移动大约40px.....

我又卡住了，抱歉我的英语不好，我不是母语人士，因此德国网站...

谢谢

Answer 1

我明白为什么这个问题会有点难以查明，但在未来请尝试提供一些代码，或者至少提供详细说明问题的屏幕截图，以帮助其他人更好地理解您所面临的问题。

我认为问题在于您文档的结构。 <div>触发工具提示出现的实际上并不在文档流中 - 它是绝对定位的。这意味着当您展开附加信息时，文档的其余部分将被移动，但绝对定位触发器 <div>停留在最初的位置。因此，当您将鼠标悬停在优惠券代码上时，工具提示不再出现，而是出现在它曾经出现的位置 - 因为那是触发器 <div> 的位置。仍然是。

如何解决这个问题？好吧，你可以扣动扳机 <div>它在逻辑上应该存在于结构中的位置。我不确定触发元素是否是动态生成的，所以我无法给出确切的实现说明。但是，工作结构的外观如下:

<div class="couponAndTip">
    <div class="link-holder">
        <div style="position: absolute; right: 0; top: 0; width: 93px; height: 100%; z-index: 99;">
            <embed id="ZeroClipboardMovie_2" src="http://cloud0815.joloshop.com/wp-content/themes/gutscheincloud/includes/js/zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="93" height="24" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&amp;width=93&amp;height=24" wmode="transparent">
        </div>
        <a href="http://cloud0815.joloshop.com/go/karstadt-20prozent-rabatt-3/15381" id="coupon-link-15381" class="coupon-code-link" title="Code kopieren &amp; Shop öffnen " target="_blank">
            <span class="">bad20</span>
        </a>
    </div> <!-- #link-holder -->
    <p class="link-popup" style="display: none;">
        <span>Code kopieren &amp; Shop öffnen </span>
    </p>
</div>

(此代码是从优惠券代码元素之一复制而来，并经过修改以包含触发器 <div>)。那<div>绝对定位(及其内容)是工具提示的触发器，我将其添加到我复制的 HTML 中。您还需要此 CSS 样式才能使其正常工作:

.link-holder{
    position:relative;
}

就是这样。一点 CSS 和一些结构的重新排列。但是，我确实注意到对于每个触发器，宽度属性各不相同，并且是通过内联 CSS 样式设置的。这表明动态生成，这意味着可能需要更改一些 JavaScript。 (另一方面，如果它们都是硬编码的，那么重新排列它们的任务就会简单得多。)

希望这就是您要找的!如果没有，请告诉我，我很乐意进一步提供帮助。祝你好运!