Question

我旁边有一个图片图标和一个讲话泡泡，让它看起来像是在说话。尖端位置在左侧。

.text_bubble_right {
width:300px;
height:100px;
background-color:#00FFFF;
border-radius:15px;
padding:5px 0 0 5px;
margin-left:20px;
position:relative;
display:inline-block;
vertical-align:top;
}

.text_bubble_right:after {
content:"";
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent; 
border-right:20px solid #00FFFF;
position:absolute;
top:15px;
right:100%;
}

每当窗口的宽度足够小时，气泡将移动到图标下方。但是，提示仍在左侧。我想根据气泡所在的位置更新提示的位置。

我知道jQuery将无法操作:before和:after伪类，所以我打算只创建一个额外的类，我将添加它并删除旧类来更新位置

假设这样可行，有什么方法可以用jQuery检查气泡的位置（无论是在右侧还是在图标下方）？此外，一旦页面完成加载，是否有办法检查并确保提示位于正确的位置（否则，气泡可能位于图标下方，但提示可能仍在左侧）？

Answer 1

改变泡沫的位置

.text_bubble_right {
    width:300px;
    height:100px;
    background-color:#00FFFF;
    border-radius:15px;
    padding:5px 0 0 5px;
    margin-left:20px;
    position:relative;// Position change
    display:inline-block;
   vertical-align:top;
}

以

.text_bubble_right { width:300px; height:100px; background-color:#00FFFF; border-radius:15px; padding:5px 0 0 5px; margin-left:20px; position:absolute;// Position change display:inline-block; vertical-align:top; }

Answer 2

好吧，关于如何使用jQuery玩类的想法：

http://jsfiddle.net/coma/G5CeM/

var body = $('body').on('mouseover', '[data-tip]', function(event) {

    var self = $(this).removeClass('right');
    var x = self.offset().left + self.width() / 2;

    if (x < body.width() / 2) {

        self.addClass('right');
    }
});

CSS语音气泡：如何根据气泡的位置更新提示位置

2 个答案: