Question

我有一些这样的文字：

Once upon a time, <div class="light">there lived</div> a cat.
The <div class="light">cat liked</div> to watch fish swim.

我需要在<div>中添加一些文字，例如<div class="hidden_when_inside">text</div>如果放在<div class="light">内，则会隐藏，但在外面时不会被隐藏。 E.g：

Once upon a time, <div class="light">there <div class="hidden_when_inside">this text is invisible</div> lived</div> a cat.
The <div class="light">cat liked</div> to watch <div class="hidden_when_inside">this text is visible</div>fish swim.

同样，<div class="hidden_when_outside">中的某些文字只会在<div class="light">之外隐藏。

隐藏的意思是：

无法看到文字。
无法选择文字。
文字不占空间。
该文字不会影响其他文字的格式。

有没有办法隐藏或显示文字，具体取决于它是否出现在另一个<div>内？

Answer 1

使用父选择器隐藏内部元素，如下所示。

 .light .hidden_when_inside{display:none}

FIDDLE DEMO

Answer 2

这可以使用纯粹的css使用子选择器>来完成（注意这只会影响直接的孩子，所以如果用例是.hidden_when_inside可以嵌套在{{1}内的几个层然后去.light）

.light .hidden_when_inside

.light > .hidden_when_inside{
  display:none
    }

Answer 3

如果您想稍后再显示它，您需要深入了解JavaScript，例如：

document.getElementByTagName('hidden_when_inside').onclick = function() {

var className = ' ' + myButton.className + ' ';

this.className = ~className.indexOf(' active ') ?
                     className.replace(' active ', ' ') :
                     this.className + ' active';

}

如何在<div>？</div>内部或外部隐藏或显示文本

3 个答案: