使用querySelector与filter函数实现hover效果时遇到的问题

我想编写一个函数，当指定className的<span>元素被hover时，改变所有同class列表项的background-color。目前存在两个问题：

• 仅单个<span>被hover时功能生效，而我需要任意<span>被hover时都触发该效果；
• 最后一组span无法正常工作。

我是JavaScript新手，明白代码还有很多优化空间，恳请各位帮忙解决！

注：NEW ATTEMPT区块的代码是失败尝试，与当前展示效果无关。

代码实现 #

JavaScript #

const array = [...document.getElementsByClassName('important')];
console.log(array);
console.log('---- ---- ---- ----');

// NEW ATTEMPT:

// NOTE: I copied that one from another code which had worked perfectly;
// I.E.: element.filter(item => (item !== e.target));

for (let i = 0; i < array.length; i++) {
    array[i].onmouseover = (e) => {
        console.log(`block ${i} was hovered over.`);

        // const arrayBlock = e.target;
        // arrayBlock.id = ``;

        let marking = array.filter(item => (item.querySelectorAll === `span.color-A${i}`));

        for (let all of marking) {
            all.style.backgroundColor = "red";
        };
    }
};

// NEW ATTEMPT ^^

// OLD ATTEMPT:

const markerContainer = document.getElementById('marker-container'); // Created because 'querySelector' couldn't be set upon const 'array';
console.log(markerContainer.children);
console.log('---- ---- ---- ----');

for (let i = 0; i < array.length; i++) {
    const arrayBlock = markerContainer.querySelector(`.block-A${i}`);
    
    console.log(arrayBlock);
    console.log('---- ---- ---- ----');

    const marking = arrayBlock.querySelectorAll(`span.color-A${i}`);

    console.log(marking);
    console.log('---- ---- ---- ----');

    marking[i].onmouseover = () => { // GETS AN ERROR: "TypeError: Cannot set properties of undefined (setting 'onmouseover')";
        for (let all of marking) {
            all.classList.remove(`A${i}-leave`);
            all.classList.add(`A${i}-enter`);
        };
    }

    marking[i].onmouseout = () => {
        for (let all of marking) {
            all.classList.remove(`A${i}-enter`);
            all.classList.add(`A${i}-leave`);
        };
    }
};

// OLD ATTEMPT ^^

CSS #

.color-A0 {
    background-color: white;
    color: black;
}

.A0-enter {
    animation: A0-enter 0.4s ease 0s 1 normal forwards;
}

@keyframes A0-enter {
    0% {
        background-color: red;
        color: black;
    }

    100% {
        background-color: red;
        color: white;
    }
}

.A0-leave {
    animation: A0-leave 0.4s ease 0s 1 normal forwards;
}

@keyframes A0-leave {
    0% {
        color: black;
        background-color: red;
    }

    100% {
        background-color: white;
    }
}

.color-A1 {
    background-color: white;
    color: black;
}

.A1-enter {
    animation: A1-enter 0.4s ease 0s 1 normal forwards;
}

@keyframes A1-enter {
    0% {
        background-color: blue;
        color: black;
    }

    100% {
        background-color: blue;
        color: white;
    }
}

.A1-leave {
    animation: A1-leave 0.4s ease 0s 1 normal forwards;
}

@keyframes A1-leave {
    0% {
        color: black;
        background-color: blue;
    }

    100% {
        background-color: white;
    }
}

.color-A2 {
    background-color: white;
    color: black;
}

.A2-enter {
    animation: A2-enter 0.4s ease 0s 1 normal forwards;
}

@keyframes A2-enter {
    0% {
        background-color: green;
        color: black;
    }

    100% {
        background-color: green;
        color: white;
    }
}

.A2-leave {
    animation: A2-leave 0.4s ease 0s 1 normal forwards;
}

@keyframes A2-leave {
    0% {
        color: black;
        background-color: green;
    }

    100% {
        background-color: white;
    }
}

HTML #

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>

    <style>
        body {
            text-align: left;
            padding-top: 10%;
            padding-left: 10%;

            font-family: sans-serif;
            font-size: 40px;
        }
    </style>

    <link rel="stylesheet" href="a.css">
</head>

<body>
    <div id="marker-container">

        <span class="important block-A0">
            <p>

                <span class="color-A0">
                    Important Text Number A1 (Related to: Red)</span>
                -
                <span class="color-A0">
                    Important Text Number A2 (Related to: Red)</span>

                BLAH BLAH BLAH

                <span class="color-A0">
                    Important Text Number A3 (Related to: Red)</span>

                BLAH BLAH BLAH
                -
                <span class="color-A0">
                    Important Text Number A4 (Related to: Red)</span>

                Summary.

            </p>
        </span>

        <span class="important block-A1">
            <p>

                BLAH BLAH BLAH

                <span class="color-A1">
                    Important Text Number B1 (Related to: Red)</span>
                -
                BLAH BLAH BLAH

                <span class="color-A1">
                    Important Text Number B2 (Related to: Red)</span>

                Summary.

            </p>
        </span>

        <span class="important block-A2">
            <p>

                <span class="color-A2">
                    Important Text Number C1 (Related to: Red)</span>

                BLAH BLAH BLAH

                -
                BLAH BLAH BLAH

                <span class="color-A2">
                    Important Text Number C2 (Related to: Red)</span>

                Summary.

            </p>
        </span>

    </div>

    <script src="a.js"></script>
</body>

</html>

内容的提问来源于stack exchange，提问作者user26545514