javascript - 在标记上方创建一个 InfoBox 窗口， stub 位于正确的位置

Question

我一直在研究 InfoBox 文档和这篇文章 here尝试让 InfoBox 看起来与标准 InfoWindow 几乎一样，以此作为一些细微外观变化的起点。

正如您在 this fiddle 中看到的那样将信息框连接到标记的“ stub ”仍位于信息框的顶部。

我试过在 boxStyle 参数中使用 backgroundPosition(当你第一次打开 fiddle 时被注释掉)，但它不起作用。

     boxStyle: {
        backgroundImage: "url('https://directory.fsf.org/w/extensions/SemanticDrilldown/skins/down-arrow.png')",
        backgroundRepeat: "no-repeat",
        /*backgroundPosition: "center bottom",*/
        opacity: 0.75,
        width: "280px"
    },

如何将 stub 向下移动到底部中心而不是左上角？

Answer 1

使用 :after 选择器将其添加到信息框。像这样

#infobox:after{
    content: "";
    position: absolute;
    bottom: -15px;
    left: 125px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #333 transparent;
    display: block;
    width: 0;
}

参见 Demo

附注我没有从你的 JS 中删除旧的。这就是为什么您仍然会在屏幕上看到它。

根据 OP 的要求提供支持文档

有很多关于 CSS 选择器的文档，特别是 :before 和 :after 选择器。其中一些，可能是最基本的信息可以在 w3schools 中找到。 .

SmashingMagazine也有更多关于这个概念的详细信息和有用性。

通过使用选择器修改元素，您还可以根据行为设置样式。比如:hover, :focus, :active, :inactive, :empty > 和 :blank

实际的三 Angular 形是通过使用边框绘制一个小矩形并剪裁边框的一侧而构建的。参见 this link在 CSS 技巧中介绍如何构建 CSS 三 Angular 形。

就选择:before 或:after 而言，没有关于您应该使用哪一个的明确解释。根据您使用的是哪一个，您将不得不相应地重新定位。在某些特定情况下，例如通过 CSS 选择器添加超赞字体图标，如果它要位于要附加到的元素之前，则将其添加到 :before 选择器是有意义的:after 选择器，如果它要继续元素