Как я могу преобразовать это из jQuery в vanilla JS?

Question

Для всего, над чем я работаю прямо сейчас, я очень хорошо переработал из jQuery в vanilla, но мне интересно, как я мог бы сделать следующее с vanilla JS.

Я хочу установить событие наведения на массив объектов. В функции обработчика событий я хочу изменить некоторые свойства css на некоторые дочерние элементы. Хитрость заключается в том, что я хочу выбрать эти дочерние элементы по классам, но обязательно выберите дочерние элементы из элемента, который вызвал обработчик события hover.

Так что мне нужно заменить .hover() .find() и .css() на vanilla JS.

$('.item').hover(function() { 
     $(this).find('.qLeft > img').css('box-shadow', '2px 2px 5px -1px black'); 
     $(this).find('.qRight > img').css('box-shadow', '-2px 2px 5px -1px black'); 
    }, function() { 
     $(this).find('.qLeft > img').css('box-shadow', '3px 5px 8px -2px black'); 
     $(this).find('.qRight > img').css('box-shadow', '-3px 5px 8px -2px black'); 
    }); 


<li style="float: left;" class="item"> 
    <div class="CardHeader"> 
     <h3>Appointment Calendar Book</h3> 
    </div> 
    <div> 
     <img src="Assets/Calendar%20-%20Appointment%20Book4.png" /> 
    </div> 
    <div class="qContainer"> 
     <div class="qLeft"> 
      <img src="Assets/BlackGreenMinus.png" /> 
     </div> 
     <div class="qCenter">1</div> 
     <div class="qRight"> 
      <img src="Assets/BlackGreenPlus.png" /> 
     </div> 
    </div> 
</li> 

Answer 1

Вот часть решения. Вы должны быть в состоянии выяснить, как реализовать остальные:

var items = document.getElementsByClassName("item"); 

Array.prototype.forEach.call(items, function(element) { 
    element.addEventListener("mouseover", function() { 

    elements = this.querySelectorAll(".qLeft>img"); 

    Array.prototype.forEach.call(elements, function(el) { 
     el.style.boxShadow = "2px 2px 5px -1px black"; 
    }); 

    // same for qRight 
    }); 

    element.addEventListener("mouseout", function() { 
    // ... 
    }); 
}); 

Answer 2

Попробуйте использовать css:hover

.item .qLeft > img { 
    /* default settings */ 
} 

.item .qRight > img { 
    /* default settings */ 
} 

.item:hover .qLeft > img { 
    /* do stuff */ 
} 

.item:hover .qRight >img { 
    /* do stuff */ 
}