Question

我正在使用我在网络上找到的一个例子来创建CSS3中假设的HTML5工具提示。

.tooltip {
    border-bottom: 1px dotted #333;
    position: relative; cursor: pointer;
}  

.tooltip:hover:after {
    content: attr(title);
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
}

如何以编程方式创建此应用程序，因为应用程序故意不包含HTML或CSS？

据我所知，到目前为止，我认为'after'是一个 CSS选择器，但我无法找到更多关于如何在DOM中创建，访问或修改它的信息使用JavaScript。

只有JavaScript解决方案，谢谢。

Answer 1

您可以使用insertRule在文档中添加任何CSS规则。在MDN页面上，有一个方法显示了一个跨浏览器兼容的方法来插入任意CSS规则。

由于您的应用不包含任何HTML，因此您必须使用document.createElement自行创建<style>对象。当样式表来自不同的原点时，document.styleSheets[0].cssRules将是null。

Answer 2

由于:hover是事件限制的，您需要将所有相关事件（例如onmouseover，onmouseout）挂钩到所有相关元素（其中/\btooltip\b/.test(className)）你想在JS中做到这一点。

您可以将事件绑定到公共父级（例如document.body，然后检查event对象以限定触发事件的元素，而不是将事件附加到未知数量的元素）

对于:after，这是在所选元素之后插入的伪元素，并且由于:hover，它只会在悬停时位于文档中。所以你只需要使用DOM方法来添加/删除元素（你不需要每次都创建它，你可以创建一次并保持对它的引用）。

您可以只添加/移除一次元素，然后切换它的可见性（例如element.style.display = visible ? '' : 'none';），而不是添加/删除元素。

你做的事取决于你。

如何以编程方式访问CSS选择器？

2 个答案: