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

Question

[Евгений Журов]

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

Есть такая структура:

<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, зумировалась только та картинка, которая непосредственно под ним, а не все сразу?

Answer 1

[Евгений Журов]

Всем спасибо за ответы, благодаря им смог сам разобраться. Получился вот такой монстр:

$(".item__descript").hover(function() {
	$(this).parent().children(".zoom-img").css(/* стили, к-рые нужно присвоить */);
	}, function() {
	$(this).parent().children(".zoom-img").css(/* убрать стили */);
});

Answer 2

[Евгений]

Так, а зачем each()?
Просто обрабатываем hover и все

$(".child-absolute").hover(function() {
 $(this).parent().css("background", "red");
  }, function() {
  $(this).parent().css("background", "transparent");
});

Comments

[Евгений Журов]

Прошу прощения, мозги отекли совсем - неправильно вопрос сформулировал. Добавил в него update.

Answer 3

[Дима]

даа.. 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
  }
})

Answer 4

[Дмитрий Поляков]

По на ведению на верхний менять z-index верхнего на отрицательный, а по уходу с нижнего, возвращать z-index верхнему