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

Question

我有一个带有图标的框元素（使用字体真棒图标“fa-video-icon”）和文本标题“视频教程”，这里是：

<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;
}

小提琴。_

当框悬停在上面时，它会设置背景图像，并通过将文本从屏幕上缩进来删除文本。它还会将跨度（我假设它显示图标）也移出屏幕。