使用 jQuery 动态定位 CSS 语音气泡的三角形（:before & :after classes）

Question

我创建了一个纯 CSS 语音气泡，其中三角形“语音提示”使用“玩零大小 div 的 4 个边框”技巧完成。到目前为止一切顺利。

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

图例：

http://www.designwalker.com/img/speech_bubble/speech_bubble10.jpg（忽略色差，第1个和第2个气泡中​​三角形的位置不同）。

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

有解决办法吗？

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

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

谢谢！

安德鲁

附注：

顺便说一句，我进一步查看了 Facebook，他们可能正在玩一些背景图片精灵技巧。但是我花了很多时间使用“玩零大小 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%;
}

那么你需要做的就是改变'bubble'元素的类——从而避免试图影响:after元素的CSS属性的问题。