Как добавить фоновое изображение при наведении курсора на несколько элементов

Question

Как добавить фоновое изображение при наведении курсора на несколько элементов

0

У меня есть элемент box со значком (с использованием шрифта awesome icon "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;
}

Ценю вашу помощь!

user260187 08 нояб. 2013, в 23:12

Источник

0

Что такое CSS для класса коробки?
Matthew Johnson 08 нояб. 2013, в 22:14
0

Я добавил CSS выше извините. Спасибо за вашу помощь.
user260187 08 нояб. 2013, в 22:23
0

Это скрипка поведения, которое вы ищете?
Matthew Johnson 08 нояб. 2013, в 22:35

Показать ещё 1 комментарий

Теги:

html

css

font-awesome

1 ответ

Ещё вопросы

Я добавил CSS выше извините. Спасибо за вашу помощь.
Это скрипка поведения, которое вы ищете?

Matthew Johnson · Accepted Answer · 2013-11-08T21-10-00.000Z

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

Скрипка.

Когда поле зависнет, оно устанавливает фоновое изображение и удаляет текст, отступая от экрана. Он также перемещает диапазон, который, как я предполагаю, показывает значок, также и на экране.