html - 如何在悬停时为具有多个元素的 div 添加背景图像

Question

我有一个带有图标的框元素(使用 Font Awesome 图标“fa-video-icon”)和文本标题“Video Tutorial”，这里是:

<a class="box" href="http://mylinkhere"><div class="heading-icon"><i class="fa fa-video-camera"></i></div>Video Tutorials</a>

我想要实现的是当人们将鼠标悬停在框上以显示背景图像而不是框时。该框不应出现，只有背景图像。

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

.heading-icon {
font-size: 55px;
font-size: 4rem;
color:#8C0921;
margin-bottom: 1rem;
}

感谢您的帮助!

Answer 1

HTML:

<a class="box" href="http://mylinkhere">
    <span class="heading-icon">
        <i class="fa fa-video-camera"></i>
    </span>Video Tutorials
</a>

CSS:

.box {
    display: inline-block;
    height: 170px;
    width: 155px;
    border: 1px solid #ddd;
    text-align: center;
    padding:10px;
    font-size: 18px;
    font-weight:bold;
    color:#222;
}
.box:hover {
    background-image: url(http://lorempixel.com/output/food-h-g-175-190-3.jpg);
    text-indent:-9999em;
}
.box:hover span {
    position:absolute;
    left:-9999em;
}
.heading-icon {
    font-size: 55px;
    font-size: 4rem;
    color:#8C0921;
    margin-bottom: 1rem;
}

fiddle .

当框悬停在上方时，它会设置背景图像，并通过将文本缩进到屏幕之外来移除文本。它还将我假设显示图标的跨度也从屏幕上移开。