jquery - 动态定位 CSS 对话泡泡的三 Angular 形 ( :before & :after classes) using jQuery

Question

我使用“使用零大小 div 的 4 个边框”技巧创建了一个带有三 Angular 形“语音提示”的纯 CSS 语音气泡。到目前为止一切顺利。

但我还需要动态调整三 Angular 形的位置(相对于包含单词的主要矩形 div)。

图示例子:

http://www.designwalker.com/img/speech_bubble/speech_bubble10.jpg (忽略颜色差异，三 Angular 形在第一个和第二个气泡中的位置不同)。

问题是三 Angular 形(及其边框)通常使用主气泡的 :before 和 :after 类来完成。并且在 jQuery(或任何 javascript API)中似乎没有(简单的)方法来操作 :before 和 :after 类的 CSS 属性。

有解决办法吗？

我很确定这是可以做到的，因为当用户将鼠标悬停在右侧的代码行上时，Facebook 似乎可以毫不费力地将三 Angular 形动态定位到它想要的任何位置(取决于屏幕折叠和其他因素)。

我在这里搜索并找到了将类动态添加到 div 的解决方案，但这似乎不切实际，因为这样会有许多独特的类，每个类都有不同的偏移值。 (从 0 像素到很多很多像素)

谢谢!

安德鲁

附言:

顺便说一句，我进一步查看了 Facebook，他们可能在玩一些背景图片 Sprite 技巧。但是我花了很多时间使用“玩零尺寸 div 的 4 个边框”技巧来“完善”我的泡泡，我真的很犹豫是否要重新调查 Facebook 是如何做到的，更不用说我必须提供网站很快...... :-(

Answer 1

伪元素不能由 Javascript 操作，因为它们没有暴露给 DOM 本身(我们过去称其为 Shadow DOM，直到该术语指代使用 Javascript 操作隐式 DOM 元素的方法)。

您可以做的是向包含元素添加类，这些类将通过其他规则影响其位置。有一个很好的例子 something very similar (它使用 <b> 元素而不是 :before 和 :after 来实现 IE6 支持——但原理是相同的，因为 <b> 元素从不被操作并且从父级推断它的样式)在 Stubornella的 OOCSS图书馆。 code信息量很大，因为它在父元素上显示了一个类，指示应如何定位子装饰元素。

更新:煞费苦心的解释

假设提示本身显示 OK 的方式，编写一个单独的 CSS 规则来为它们定义每个不同的位置。我在这里使用了 left假设:after的立场元素正在创建提示并且已经绝对定位在底部。您可以使用任何您想要的选择器或定位技巧来代替这些。

.bubble_left:after {
    left: 0;
}

.bubble_mid-left:after {
    left: 25%;
}

.bubble_mid-right:after {
    left: 75%;
}

.bubble_right:after {
    left: 100%;
}

然后，您需要做的就是更改“气泡”元素的类来更改位置——从而避免试图影响 :after 的 CSS 属性的问题。元素。