如何用css创建rolldown内容？

Question

如何使用CSS创建内容？

TEXT

INFOINFOINFO
INFOINFOINFO

将始终显示TEXT，但当指针单击TEXT时，INFO将显示。

Answer 1

您可以使用CSS属性content使用纯CSS解决方案。

如果您有兴趣了解content的更多信息，可以阅读useful article。

＆＃13;

＆＃13;

.txt span{
  display:none;
}
.txt:hover:after {
  display:block;
  content:'info info info';
}

＆＃13;

<p class="txt">text<p>

＆＃13;

＆＃13;

＆＃13;

或者你可以使用更多的经典＆＃34;方法，而是显示隐藏span标记：

＆＃13;

＆＃13;

.txt span {
  display: none;
}

.txt:hover span {
  display: block;
}

＆＃13;

<p class="txt">text<span>some information</span><p>

＆＃13;

＆＃13;

＆＃13;

Pro and Cons IMO：

第一种方法：

• 您可以保持HTML清洁。
• 搜索引擎无法显示信息文本（可能是PRO或CON，视您的使用情况而定）。
• IE＆lt; 8不支持content属性。

第二种方法：

• 您可以保留您的信息＆＃34;在HTML中。
• 搜索引擎可以看到信息。

Answer 2

检查这个

＆＃13;

＆＃13;

span{
  display:none;
}
p.head:hover span{
  display:block;
}

＆＃13;

<p class="head">text<span>info info info ifno</span><p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

指针单击时

这里只是对上一个答案的一点修改

<style>
p:active:after{
content:"info info";
}
</style>
<p>text</p>