html - CSS 在悬停 HTML 内容时显示

Question

我想创建一些盒装内容，在悬停时显示替代内容。我从其他问题中找到了一些示例，并尝试将它们用于我想要的，但运气不佳。

我试图实现的完美示例是 http://www.copyblogger.com/ 上“构建更智能的 WordPress 站点”(就在首屏下方)下的 3 个悬停按钮。 .

我假设静态状态包括图标/图像和下面的文本，悬停状态包括图标/图像、描述性文本和超链接按钮。

这正是我想要重现的。谁能提供这方面的示例，以便我了解我需要做什么？

谢谢。

编辑:我理解 Copyblogger 使用的代码是从我通过“Inspect Element”检索到的少量代码。我不想使用他们的代码 - 因为我找不到所有的连接命令，但可以找到以相同方式运行的东西。

Answer 1

对于您发送的链接中显示的代码示例

    <li class="design">
          <div class="icon">Design</div>
         <a href="http://www.studiopress.com/get-started" target="_blank"                class="info"><p>The Genesis design framework, support and dozens of stunning themes.</p><div class="btn-primary-small">Find Out More</div></a>
    </li>

CSS 将是

li.design a{
 display:none;
}
li.design:hover a{
  display:block;
}