如何在每个元素上同时激活3个不同的悬停？

<style>
    .hover-effect-1:hover {
        /* 第一个悬停效果的样式 */
    }

    .hover-effect-2:hover {
        /* 第二个悬停效果的样式 */
    }

    .hover-effect-3:hover {
        /* 第三个悬停效果的样式 */
    }
</style>

<div class="hover-effect-1">元素1</div>
<div class="hover-effect-2">元素2</div>
<div class="hover-effect-3">元素3</div>

<script>
    function handleHoverEffect1() {
        // 第一个悬停效果的处理逻辑
    }

    function handleHoverEffect2() {
        // 第二个悬停效果的处理逻辑
    }

    function handleHoverEffect3() {
        // 第三个悬停效果的处理逻辑
    }

    document.getElementById('element1').addEventListener('mouseover', handleHoverEffect1);
    document.getElementById('element2').addEventListener('mouseover', handleHoverEffect2);
    document.getElementById('element3').addEventListener('mouseover', handleHoverEffect3);
</script>

<div id="element1">元素1</div>
<div id="element2">元素2</div>
<div id="element3">元素3</div>