Почему не отображается background при наведении (bootstrapv4)?

Question

[sunnyrio]

Почему не отображается background: url(img/rect_yel.png) при наведении на <a class="recent"></a> (bootstrapv4)?

Код:

<div class="row">
            <div class="col-md-3">
                <a class="recent" href=#>
                <img src="img/rect_yel.png" alt="J D">
                </a>
                <div class="info d-none">
                    <p>sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.</p>
                </div>
                <H5>Jonh Doeeh</H5>
                <p>Lead Designer</p>
            </div>
        </div>

CSS:

.info {
    color: red;
    background-image: url(img/rect_yel.png);
}

.recent:hover ~ .info {
    display: block !important;
}

Answer 1

[Павел]

https://codepen.io/
ждем )

Comments

[sunnyrio]

это че за сайт?

[Павел]

sunnyrio, это волшебный сайт , если на него выложить свой код и скинуть ссылку сюда, то вероятность ответа на вопрос найдется с 99% вероятностью

[sunnyrio]

mrusklon, ссылку на этот вопрос нужно на том сайте выложить?

[Павел]

sunnyrio, нет, это песочница для кода , подключаете туда стили, вставляете свой html и css , показываете код нам и мы вам с удовольствием помогаем.

У вас скорее всего банальная проблема с путем к картинке , постарайтесь изучить основы html и css прежде чем использовать бутстрап

[spike__x]

sunnyrio, https://codepen.io/ это Веб-редактор в режиме онлайн решают эту проблему и мгновенно предоставляют вам готовую среду для создания кода, где вы можете сразу же начать экспериментировать. Эти инструменты позволяют объединить CSS, HTML и JavaScript, и тостер не как не относится к ним :)))

[sunnyrio]

mrusklon, да как быть мне нужно чтобы при наведении появилась моя картинка

[spike__x]

sunnyrio, Наверно путь к картинке не верно указан

[sunnyrio]

spike__x, верно ведь одна показывается точна такая же

Answer 2

[Pavel Kuzyakin]

.info {
    color: red;
    display: block;
}

.recent:hover ~ .info {
    background-image: url(img/rect_yel.png);
}

Comments

[spike__x]

В его случае не будет так работать