javascript - How can I convert this from jQuery to vanilla JS? -

for else working on right have converted jquery vanilla fine, wondering how following vanilla js.

i wanting set hover event on array of objects. in event handler function want change css properties on child elements. trick want select these child elements class, make sure select child elements element triggered hover event handler.

so need replace .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> 

here part of solution. should able figure out how implement rest:

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 qright   });    element.addeventlistener("mouseout", function() {     // ...   }); });