在悬停上隐藏/显示背景文本

Question

我无法弄清楚如何在没有所有其他元素的情况下更改背景以仅在悬停时显示“仅限会员”文本。我有这个包含内容的框元素：

<div class="box-locked"><div class="members-only">Members Only</div><div class="heading-non-members"><i class="fa fa-home"></i></div>Getting Started</a>

感谢您的帮助！

Answer 1

我不太了解，但我认为你想要这样的事情：

<a><div class="box-locked"><div class="members-only">Members Only</div><div class="heading-non-members"><i class="fa fa-home"></i></div><span>Getting Started</span></a>

添加span包装文字。这就是css：

a .members-only {
    display: none
}

a span {
    display: inline
}

a:hover .members-only {
    display: inline
}

a:hover span {
    display: none
}

看到它在小提琴上工作：http://jsfiddle.net/MH3Dc/

但请注意，该链接仍然可以使用！无论如何，没有意识到图像（标题上有所描述）在哪里发挥作用。