javascript - 淡化列表中的 sibling (非jQuery)

我创建了一个脚本，当悬停列表中的一个元素时，淡出列表中的所有项目。

我已经使其工作了-但列表中的最后一项没有淡入（当列表中的最后一项悬停时，所有项目都淡出了）-列表中的其余部分虽然可以正常工作。

我的脚本在这里-

var activeItems = document.querySelectorAll('.item');

    for (i = 0; i < activeItems.length; i++) {
    activeItems[i].addEventListener("mouseover", fadeOutItems, false);

    activeItems[i].addEventListener("mouseout", resetListStyles, false);

    function fadeOutItems() {
        for (i = 0; i < activeItems.length; i++) {
            this.setAttribute("class", "item fade-in");
            activeItems[i].setAttribute("class", "item fade-out");
        }
    }

    function resetListStyles() {
        for (i = 0; i < activeItems.length; i++) {
            activeItems[i].setAttribute("class", "item");
        }
    }

}

并在这里制造了一个小提琴-

https://jsfiddle.net/1opq1eyj/1/

关于我要去哪里的任何建议将不胜感激。

也希望对如何改进脚本提出任何建议。

谢谢，

最佳答案

您订购有误

首先，您应取消所有选择，然后再设置this.setAttribute

 function fadeOutItems() {
        for (i = 0; i < activeItems.length; i++) {
             activeItems[i].setAttribute("class", "item fade-out");
             this.setAttribute("class", "item fade-in");
        }
    }

更新link