Запутался с .parents

[Quark_]

Структура такая:

<div class="cities_block">

<div class="city_block">
<div class="city_block_in">
<a href="/"></a>
</div>
</div>

<div class="city_block">
<div class="city_block_in">
<a href="/"></a>
</div>
</div>

<div class="city_block">
<div class="city_block_in">
<a href="/"></a>
</div>
</div>

</div>

Подскажите, почему не срабатывает:

jQuery(function(){
  jQuery('.city_block .city_block_in').hover(function(){
  var parent=jQuery(this).parents('.cities_block').eq( 0 );
  parent.find('.city_block').toggleClass('bg');
  })
});

Необходимо, чтобы при наведении на city_block_in только на один вышестоящий city_block добавлялся класс, а не на все сразу.

[Nexus]

<div class="cities_block">
   <div class="city_block">
      <div class="city_block_in">
         <a href="/">a</a>
      </div>
   </div>
   <div class="city_block">
      <div class="city_block_in">
         <a href="/">b</a>
      </div>
   </div>
   <div class="city_block">
      <div class="city_block_in">
         <a href="/">c</a>
      </div>
   </div>
</div>

<style>.bg {background: red;}</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  jQuery(function () {
      jQuery('.city_block .city_block_in').hover(function () {
          jQuery(this).closest('.city_block').toggleClass('bg');
      })
  });
</script>

Вам же известно, что это задачу нужно решать с помощью css, а не js?

[Quark_]

Вам же известно, что это задачу нужно решать с помощью css, а не js?

Я пробовал через вариант:
.city_block_in:hover .city_block {
...
}
и не работает.

[laimas]

Я пробовал через вариант

А нужно получить родителя, а такого селектора в CSS нет, есть "намерения" по :has, но нет поддержки.

[Malleys]

Quark_, кстати при получении фокуса не срабатывает... Селектор .city_block:has(:focus) работает уже сейчас при помощи .city_block:focus-within

.city_block:focus-within {
	background: red;
}

А нужно получить родителя

Просто — .city_block

<div class="cities_block">
   <div class="city_block">
      <div class="city_block_in">
         <a href="#">a</a>
      </div>
   </div>
   <div class="city_block">
      <div class="city_block_in">
         <a href="#">b</a>
      </div>
   </div>
   <div class="city_block">
      <div class="city_block_in">
         <a href="#">c</a>
      </div>
   </div>
</div>

<style>
.city_block {
	background: gold;
	margin: 1em;
	padding: 1em;
	pointer-events: none; /* ! */
}

.city_block_in {
	background: yellowgreen;
	padding: 1em;
	max-width: 50%;
	pointer-events: all; /* ! */
}

.city_block:focus-within,
.city_block:hover {
	background: red; /* ! */
}
</style>

А если размеры элементов .city_block и .city_block_in совпадают (как в примере в сообщении №2), то и никакой pointer-events не нужен!