-4

我正在使用我在网上找到的一个示例，以在 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 选择器，但我找不到更多关于如何使用 JavaScript 在 DOM 中创建、访问或修改它的信息。

请仅使用 JavaScript 解决方案，谢谢。

4

2 回答 2

3

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

由于您的应用程序不包含任何 HTML，因此您必须<style>自己使用document.createElement. document.styleSheets[0].cssRules当null样式表来自不同的来源时。

于 2012-06-27T09:30:23.553 回答
1

与事件绑定一样，如果您想在 JS 中执行此操作，则 需要将所有相关事件（例如, ）:hover挂钩到所有相关元素（ where ）。onmouseoveronmouseout/\btooltip\b/.test(className)

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

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

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

你做什么取决于你。

于 2012-06-27T10:54:11.317 回答