Как выбрать верхний элемент с использованием сss

Question

Проблема заключается в следующем. Есть верстка такого типа:

<ul class="products columns-3">
  <li class="post-23">
    <a href="" class="">
      <img class="img" alt="">
      <h2 class="product__title"></h2>
      <a href="#" class="add" style="cursor: pointer;"></a>
    </a>
  </li>
</ul>

Могу ли я селектором css при наведении на ссылку с классом "add" выбрать тег "img" и изменить ему background-color. Или для этого необходимо использовать связку с JS. Спасибо за советы!

Answer 1

Только скриптом. Есть у CSS псевдокласс :focus-within, но там очень специфичная особенность и я бы не рекомендовал использовать в текущем случае.

$('.products').on('mouseenter', '.add', function() {
    $(this).closest('li').find('img').addClass('test');       
});

img {
  width: 50px;
}
.test {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul class="products columns-3">
  <li class="post-23">
    <a href="" class="">
      <img class="img" alt="" src="https://i.ytimg.com/vi/NKk6rGDpq6Y/sddefault.jpg">
      <h2 class="product__title"></h2>
      <a href="#" class="add" style="cursor: pointer;">ссылка</a>
    </a>
  </li>
</ul>

Answer 2

Есть небольшой лайфхак, благодаря которому можно решить Вашу задачу, не используя js: нужно в вёрстке поменять местами .add и .img, а с помощью относительного позиционирования - поменять обратно (тогда визуально картинка будет идти до ссылки, но в потоке - после, и можно с помощью css менять её внешний вид).

Вёрстку Вам, кстати, в любом случае придётся править, потому что у Вас ссылка в ссылке - это ошибка и работать такая конструкция не будет.

.add, .img {
  position: relative;
}
.add {
  top: 85px;
}
.img {
  bottom: 85px;
}
.add:hover ~ .img {
  background-color: red;
}

<ul class="products columns-3">
  <li class="post-23">
      <a href="#" class="add" style="cursor: pointer;">ссылка</a>
      <h2 class="product__title">Заголовок</h2>
      <img class="img" src="" alt="Картинка">
  </li>
</ul>

БЛОГ НА HUSL

Как выбрать верхний элемент с использованием сss

Ответы (2 шт):