html - 如何使用 css 创建滚动内容？

Question

如何使用 CSS 创建滚动内容？

TEXT

INFOINFOINFO
INFOINFOINFO

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

Answer 1

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

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

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

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

或者您可以使用更“经典”的方法，而不是显示隐藏 span 标签:

.txt span {
  display: none;
}

.txt:hover span {
  display: block;
}

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

---

IMO 的优点和缺点:

第一种方法:

• 您可以让您的 HTML 更干净。
• 搜索引擎将看不到信息文本(可能是优点，也可能是缺点，具体取决于您的用例)。
• IE < 8 不支持 content 属性。

第二种方法:

• 您可以将您的“信息”保存在 HTML 中。
• 信息将对搜索引擎可见。