如何将其从jQuery转换为Vanilla JS？

Question

对于我现在正在从事的所有其他工作，我已经从jQuery转换为Vanilla很好，但是我想知道如何使用Vanilla JS进行以下操作。

我想在对象数组上设置一个悬停事件。 在事件处理函数中，我想更改某些子元素上的某些CSS属性。 诀窍是我想按类选择这些子元素，但要确保仅从触发悬停事件处理程序的元素中选择子元素。

所以我需要用香草JS替换.hover（）.find（）和.css（）。

$('.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

尝试使用css :hover

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

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

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

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

Answer 2

这是解决方案的一部分。 您应该能够弄清楚其余的实现方法：

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() {
    // ...
  });
});