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

fiddle。

当盒子悬停在上面时，它会设置背景图像，并通过将其缩小到屏幕上来删除文本。它还将我假设显示图标的跨度移出屏幕。

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

1 个答案: