html - 悬停时隐藏/显示背景文本

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/

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