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

Question

对于我现在正在处理的所有其他事情，我已经从 jQuery 转换为 vanilla 就好了，但是我想知道如何使用 vanilla JS 执行以下操作。

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

所以我需要用 vanilla 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() {
    // ...
  });
});