Как сделать чтобы при наведении любого из объектов работал hover

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

При наведении мышки на фотку работает, но когда навожусь на текст фото не изменяется.

.header__menu a {
  color: #48515e;
}
.header__menu a:hover {
  color: #ffffff;
}

.header__menu img {
  opacity: 0.5;
  width: 15px;
}
.header__menu img:hover {
  opacity: 1;
}
<nav class="header__nav">
  <ul class="menu header__menu">
    <li><a href="index.html"><img src="i/glav.png"> Главная</a></li>
    <li><a href="#"><img src="i/sa.png"> Сайты</a></li>
    <li><a href="#"><img src="i/vip.png"> VIP Сайты</a></li>
    <li><a href="#"><img src="i/partner.png"> Сотрудничество</a></li>
    <li><a href="#"><img src="i/sup.png"> Контакты</a></li>
  </ul>
</nav>

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

Ответы

▲ 2Принят

Изображения находятся внутри ссылок, следовательно от их состояния и нужно отталкиваться:

.header__menu a {
  color: #48515e;
}
.header__menu a:hover {
  color: #ffffff;
}

.header__menu a img {
  opacity: 0.5;
  width: 15px;
}
.header__menu a:hover img {
  opacity: 1;
}
<nav class="header__nav">
  <ul class="menu header__menu">
    <li><a href="index.html"><img src="i/glav.png"> Главная</a></li>
    <li><a href="#"><img src="i/sa.png"> Сайты</a></li>
    <li><a href="#"><img src="i/vip.png"> VIP Сайты</a></li>
    <li><a href="#"><img src="i/partner.png"> Сотрудничество</a></li>
    <li><a href="#"><img src="i/sup.png"> Контакты</a></li>
  </ul>
</nav>

▲ 1

При наведении мышки на фотку работает, но когда навожусь на текст фото не изменяется.

Нужно эффект наведения применять к родительскому элементу.

.header__menu a {
  color: #48515e;
}
.header__menu a:hover {
  color: #ffffff;
}

.header__menu img {
  opacity: 0.5;
  width: 15px;
}
.header__menu > li:hover img {
  opacity: 1;
}
<nav class="header__nav">
  <ul class="menu header__menu">
    <li><a href="index.html"><img src="https://bipbap.ru/wp-content/uploads/2019/05/03427bfbee9ccf0557d0706e8fe0fd12.jpg"> Главная</a></li>
    <li><a href="#"><img src="i/sa.png"> Сайты</a></li>
    <li><a href="#"><img src="i/vip.png"> VIP Сайты</a></li>
    <li><a href="#"><img src="i/partner.png"> Сотрудничество</a></li>
    <li><a href="#"><img src="i/sup.png"> Контакты</a></li>
  </ul>
</nav>