Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.05.2020, 19:02
Аспирант
Отправить личное сообщение для Quark_ Посмотреть профиль Найти все сообщения от Quark_
 
Регистрация: 24.06.2015
Сообщений: 95

Запутался с .parents
Структура такая:
<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 добавлялся класс, а не на все сразу.
Ответить с цитированием
  #2 (permalink)  
Старый 25.05.2020, 19:09
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

<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?
Ответить с цитированием
  #3 (permalink)  
Старый 25.05.2020, 20:52
Аспирант
Отправить личное сообщение для Quark_ Посмотреть профиль Найти все сообщения от Quark_
 
Регистрация: 24.06.2015
Сообщений: 95

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

Я пробовал через вариант:
.city_block_in:hover .city_block {
...
}
и не работает.
Ответить с цитированием
  #4 (permalink)  
Старый 25.05.2020, 21:36
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Quark_
Я пробовал через вариант
А нужно получить родителя, а такого селектора в CSS нет, есть "намерения" по :has, но нет поддержки.
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2020, 01:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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


Сообщение от laimas
А нужно получить родителя
Просто — .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 не нужен!

Последний раз редактировалось Malleys, 26.05.2020 в 01:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запутался в версиях DREAMCORP Общие вопросы Javascript 5 29.09.2016 00:59
Date - Help Запутался al456 Общие вопросы Javascript 4 31.10.2015 22:37
Запутался с событиями MadGest jQuery 9 02.11.2011 08:20
Функция в функции. Обработчики клика. Запутался =) DorianLeroy Общие вопросы Javascript 8 29.09.2011 16:17
Немогу поставить условие, запутался nemo Серверные языки и технологии 1 30.01.2010 14:18