0

我创建了一个纯 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 像素到许多像素）

谢谢！

安德鲁

PS：

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

4

1 回答 1

3

伪元素不能被 Javascript 操作，因为它们没有暴露给适当的 DOM（我们曾经将其称为 Shadow DOM，直到该术语指代使用 Javascript 操作隐式 DOM 元素的方法）。

您可以做的是向包含元素添加类，这些类将通过其他规则影响其位置。在Stubornella的OOCSS库中有一个非常相似的很好的例子（它使用<b>元素而不是:before实现:afterIE6 支持——但原理是一样的，因为<b>元素从不被操纵并从父元素中推断出它的样式） 。该代码信息量很大，因为它显示了父元素上的一个类，该类指示应如何定位子装饰元素。

更新：煞费苦心的解释

假设提示本身显示 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属性的问题。

于 2013-02-21T17:49:37.963 回答