Почему не работает hover на один элемент с before родительского?

Рейтинг: 0Ответов: 1Опубликовано: 16.08.2025

Хочу при наведении на изображение, изменять свойства псевдоэлемента родительского блока, такое возможно? Может не правильно делаю?

.img-test {
  transition: .3s;
}

.img-test:hover {
  transition: .3s;
  transform: scale(1.05);
  border-radius: 10px;
  cursor: pointer;
  filter: brightness(40%);
}

.img-before {
  position: relative;
}

.img-before:before {
  transition: .3s;
  content: "✓";
  position: absolute;
  height: 100%;
  width: 100%;
  display: none;
}

.img-test:hover .img-before::before {
  font-size: 2em;
  color: #fff;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="img-before">
  <img src="https://jjji.ru/200x200" class="img-test"  alt="/">
</div>

css
Источник: Stack Overflow на русском

Ответы

▲ 2

CSS не дает доступ к родительским элементам через потомков. Только с верху в низ по иерархии вложености можно достучаться, ну или если элементы в приделах общего родителя. А так не понятно чем вас не устраивает .img-before:hover::before{}

.img-test {
  transition: .3s;
}

.img-test:hover {
  transition: .3s;
  transform: scale(1.05);
  border-radius: 10px;
  cursor: pointer;
  filter: brightness(40%);
}

.img-before {
  position: relative;
}

.img-before:before {
  transition: .3s;
  content: "✓";
  position: absolute;
  z-index: 9;
}

.img-before:hover::before {
  font-size: 2em;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="img-before">
  <img src="https://jjji.ru/200x200" class="img-test"  alt="/">
</div>