Question

现在我正在为我们的临时WordPress网站制作格式良好的CSS文件，直到新网站准备就绪。制作CSS样式表和漂亮的HTML文件后，我发现如果他们在帖子中内联，他们在WordPress中没有工作，而是我必须将它们放在一个单独的原始HTML文件中（使用＆＃34; WP文件管理器＆＃34;插件将它们上传到一个单独的文件夹。）之后，它们在网站上显示的方式与我们的HDD或个人（LAMP）测试站点上的样子相匹配（使用Safari 10.1.1 OS X）），如果我在浏览器中显示源代码，它看起来与我上传的内容相同。

然后我按照w3schools的教程创建了一个带有CSS的工具提示样式。在样式表中，我定义了＆＃34;编辑＆＃34;作为我对原始文本进行更改的风格

.edit { /* changes made, */
    color: navy;
    position: relative;
    display: inline-block;
}
.edit .tooltip {
    font-size: medium;
    visibility: hidden;
    background-color: navy;
    color: white;
    text-align: center;
    width: 20em;
    padding: 0.5em;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}
.edit:hover .tooltip{
    visibility: visible;
}

然后（根据教程）我添加＆＃34;工具提示＆＃34;内部文字＆＃34;编辑＆＃34;文本

<h5 class="edit">¶ Then shall be said or sung the following Canticle.
<span class="tooltip">This canticle is most commonly used.</span></h5>

在我的硬盘驱动器和我的个人网站上，工具提示是隐身的，直到我将鼠标悬停在它上面，然后它会弹出一个气球。

但是当我将它加载到WordPress上时，隐藏文本始终可见内联，就像＆＃34;工具提示＆＃34;风格被忽略了。为了解决这个问题（所以我不必重新编辑HTML文件），我可以通过将工具提示样式定义为

来禁用和隐藏所有工具提示。

.edit .tooltip {
    visibility: hidden;
    font-size: 0%;
}

这表明＆＃34;工具提示＆＃34;正在被看到，但隐藏部分的某些方面在WordPress.com上的解析方式不同。

那么WordPress可能会使用哪些CSS样式或属性导致我的文本显示？有没有办法用CSS先发制人地覆盖它？我应该编写一个经过的JavaScript并手动隐藏工具提示吗？

我应该尝试让它消失的任何实验？

PS：这与CSS Tooltip will not work on WordPress page的问题不同，因为我的文字是内联显示的。

Answer 1

你在说：

但是当我将它加载到WordPress上时，隐藏文本始终是内联可见的，就像忽略了“工具提示”样式一样。

这表示在加载其他css样式之前，已加载具有工具提示样式的文件。因此，最后加载的文件会覆盖之前加载的文件。

要进行调试，请尝试将!important添加到工具提示样式规则中，如下所示：

.edit .tooltip {
    visibility: hidden !important;
    font-size: 0%;
}

并查看是否进行了任何更改。

然后，修改您的WordPress文件，以便最后加载您的工具提示样式。这将允许您删除!important标志。（因为使用该标志不是最佳做法，应尽可能避免使用）

CSS工具提示在WordPress HTML文件

1 个答案: