CSS悬停：如何在悬停时为包含html内容的小框设置不同的内容

以下是我需要实现的目标。我有一个包含html内容的小框（按钮），包括图标字体和文本

<a class="box-locked"><span class="heading-icon-non-members"><i class="fa fa-home"></i></span>Getting Started</a>

您可以在此处看到可视化结果：

目标是在悬停时显示另一种类型的内容。它应该显示一个带有“仅限成员”文本的“锁定图标”

---

我宁愿不使用背景图像，因为网站应该是完全响应的，并且框在小屏幕上会有一个全宽。

您可以使用

content

属性，或者使用Javascript更容易（并且支持较旧的浏览器）

看起来可以解决你的问题。如果悬停，你可以很容易地同时使用它们并隐藏其中一个…@Damon:这怎么能解决问题？你能演示如何在代码中应用css吗？没有Javascript方面的经验。如果你对如何使用Java有什么建议的话？我绝对不会尝试使用Java，因为Java是一种完全不同的语言；）如果您完全不熟悉Javascript，请查看jQuery。这很容易掌握，不必担心浏览器不一致，而且有大量的教程。我相信你，当我有时间的时候，我会学习Java，但现在它不是我的解决方案，谢谢。

.box-locked {
display: inline-block;
height: 170px;
width: 155px;
border: 1px solid #ddd;
text-align: center;
padding:10px;
padding-top:1rem;
padding-bottom:1rem;
padding-right:2.5rem;
padding-left:2.5rem;
font-size: 18px;
font-size: 1.2857143rem;
font-weight:700;
color:#757575;
margin-bottom: 20px;
margin-bottom: 2rem;
margin-right: 15px;
margin-right: 1.5rem;
vertical-align:top;
line-height:1.1;}

.heading-icon-non-members {
font-size: 55px;
font-size: 4rem;
color:#757575;
margin-bottom: 1rem;
text-align:center;
}