@vladimirr89

Почему не работает hover:before?

Хочу чтобы при наведении становился полупрозрачным блок image-box. А кнопка подробнее наоборот становилась видимой поверх него. Создал вот такой код

div class="col-md-4 col-xs-12" style="margin-top:15px;">
            <div class="image-box">
                <a href="#" class="image-hover-effect">
                    <img src="/image/catalog/assets/cat/9.jpg" class="img-responsive" alt="image-banner">
                </a>
                <a href="#" class="button our-collections">Подробнее</a> 
            </div>
        </div>


Задал такие стили:

.banner-box .image-box:hover {
background: rgba(255, 255, 255, 0.8);
}

.banner-box .image-box::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.0);
}

.banner-box .image-box:hover:before {
background: rgba(255, 255, 255, 0.8);
}


При наведении никакой реакции от image-box, как будто ничего не делал. Сама кнопка "Подробнее" появляется при помощи скрипта, а вот бэкграунд как был так и остается неизменным. Подскажите где я ошибся?
  • Вопрос задан
  • 724 просмотра
Решения вопроса 1
@vladimirr89 Автор вопроса
В общем нужно было немного по другому подойти и задать before соседнему c img блоком элементу class="image-hover-effect" а далее уже дело техники. Вот готовый результат css
.banner-box .image-hover-effect::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0)
}

.banner-box .image-hover-effect:hover::before {
background-color: rgba(255, 255, 255, 0.8);
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
sevirinov
@sevirinov
Web Developer
Если правильно понял, то возможно так:
.banner-box .image-box {
  position: relative;
}

.banner-box .image-box:hover {
  background: rgba(255, 255, 255, 0.8);
}

.banner-box .image-box::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.0);
  z-index: 1;
}

.banner-box .image-box:hover:before {
  background: rgba(255, 255, 255, 0.8);
}

.banner-box .image-box:hover .our-collections {
  position: relative;
  z-index: 2;
}
Ответ написан
Комментировать
By_Engine
@By_Engine
У hover нет after и before. Правильно будет так ::before:hover
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы