Задать вопрос
Zhuroff
@Zhuroff
javascript

Как использовать $.each() с двумя массивами/объектами?

Вопрос переписан, и-таки теперь задан правильно =) Сначала хотел не усложнять, чтобы сам принцип выяснить, но придется описывать реальную проблему.

Есть такая структура:
<li class="list__item" style="position: relative">
	<img class="zoom-img" src="picture.png">
        <div class="item__descript" style="position: absolute; opacity: 0">
    	      <h1>Некоторый контент</h1>
       </div>
</li>


Таких li - восемь штук. У каждого своя картинка и блок с описанием. item__descript и картинка, а также и родитель - одинаковой ширины и высоты. То есть item__descript перекрывает собой картинку. Изначально item__descript прозрачный (opacity: 0), а также имеет полупрозрачный фон (не стал все стили указывать), но, поскольку на странице он есть, то по сути курсор наводится на него, а не на картинку. Когда курсор наведен, картинке присваивается transform: scale(1.1), то есть она зумируется и одновременно меняется у блока item__descript opacity (на 1).
Вот, собственно, такая история =) как сделать так, чтобы при наведении на конкретный item__descript, зумировалась только та картинка, которая непосредственно под ним, а не все сразу?
  • Вопрос задан
  • 230 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Zhuroff
@Zhuroff Автор вопроса
Всем спасибо за ответы, благодаря им смог сам разобраться. Получился вот такой монстр:

$(".item__descript").hover(function() {
	$(this).parent().children(".zoom-img").css(/* стили, к-рые нужно присвоить */);
	}, function() {
	$(this).parent().children(".zoom-img").css(/* убрать стили */);
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
e_snegirev
@e_snegirev
Так, а зачем each()?
Просто обрабатываем hover и все

$(".child-absolute").hover(function() {
 $(this).parent().css("background", "red");
  }, function() {
  $(this).parent().css("background", "transparent");
});
Ответ написан
1 комментарий
1 комментарий
@v_m_smith
лучше бы я пил и курил
даа.. jQuery мощная штука...
в Vue как-то попроще выглядит. но, правда, inline
https://jsfiddle.net/xd5nj3b4/4/

<div id="parent" style="position: relative">
    <div class="backgr" v-bind:class="[isHovered ? 'red' : 'transparent']" style="position: absolute">became_red</div> 
    <div class="for_hover" v-on:mouseenter="isHovered = true" v-on:mouseleave="isHovered = false" style="position: absolute">hoverme-hoverme-hoverme</div>
</div>


var app = new Vue({
  el: '#parent',
  data: {
    	isHovered: false
  }
})
Ответ написан
Комментировать
Комментировать
James_Raynor
@James_Raynor
По на ведению на верхний менять z-index верхнего на отрицательный, а по уходу с нижнего, возвращать z-index верхнему
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы