Question

我正在尝试定位未包含在任何特定标记或包装中的文本。我使用wordpress调用从wordpress中提取信息，因此我无法编辑我正在进行的操作。

HTML / PHP看起来像这样：

<div class="content-box">
    <?= $page[0]->post_content; ?>      
</div>

HTML输出如下：

<div class="content-box">
    <h1>Title Here</h1>
    Here is some text I need to target
</div>

我需要隐藏（并使用jQuery操作）内容框中的文本，尽管我无法在其周围添加任何HTML来包装它。

我想要做的是最初隐藏文字并在悬停时隐藏fadeIn()。那么如何用CSS定位该文本呢？

感觉我需要做这样的事情：

.content-box > *:not(h1){
    display:none;
}

但是没有做到。

Answer 1

值得指出的是，您可以使用visibility: hidden隐藏父元素，然后使用h1显示visibility: visible元素。不幸的是，您无法使用display属性执行此操作。

＆＃13;

.content-box {
    visibility: hidden;
}
h1 {
    visibility: visible;
}

＆＃13;

<div class="content-box">
    <h1>Title Here</h1>
    Here is some text I need to target
</div>

＆＃13;

如果要使用span包装文本节点，可以使用：

$('.content-box').contents().filter(function () {
    return this.nodeType === 3;
}).wrap('<span></span>');