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

在前端开发中，可以通过以下方式在每个元素上同时激活3个不同的悬停效果：

使用CSS的:hover伪类：通过为每个元素添加不同的class，然后利用CSS的:hover伪类为每个class定义不同的样式，从而实现不同的悬停效果。例如：

<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>

使用JavaScript事件监听：通过JavaScript为每个元素添加鼠标悬停事件监听器，并在事件处理函数中分别处理不同的悬停效果。例如：

<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>

以上是两种常见的实现方式，具体选择哪种方式取决于具体需求和开发环境。在实际应用中，可以根据业务需求和设计风格选择合适的悬停效果，并结合CSS和JavaScript技术实现。