如何在两次mouseenter事件触发后显示指定元素？

问题 #

练习JavaScript时设置了两个圆形元素，触发mouseenter事件时添加hover类实现缩放效果。期望当两个圆形都拥有hover类时，将id为laser的元素通过display:block显示。目前mouseenter功能正常，但laser元素始终未触发显示，疑惑是否因JS加载早于条件满足时机，询问是否需监听hover事件或其他可行方案。

相关代码 #

JavaScript代码

const circle = document.querySelector('#circle');

const circleTwo = document.querySelector('#circle2');

if (circle !== null) {
    circle.addEventListener('mouseenter', () => {
    circle.classList.add('hover');
    });
}

if (circleTwo !== null) {
    circleTwo.addEventListener('mouseenter', () => {
        circleTwo.classList.add('hover');    
    });
};


if (circleTwo.classList.contains('hover') && circle.classList.contains('hover')) {
    document.getElementById("laser").style.display = "block"
};

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="app.js" defer></script> 
    <title>Something Else</title>
    <style>
        body { background-color: gray; background-image: url(images/acid.gif); background-size: cover; background-repeat: no-repeat;}
    </style>
</head>
<body>
    <div class="container">
        <div id="circle">Text</div> 
        <div id="circle2">Text</div> 
        <a href="laser.html"><img src="images/laserEyes.png" id="laser"></a>
    </div>
</body>
</html>

解决方案 #

核心问题是你那个判断两个圆形是否都有hover类的if语句，只会在页面加载完成时执行一次——而此时两个元素都还没有hover类，所以laser不会显示。后续触发mouseenter添加类时，这个判断逻辑不会再自动运行。

可行方案 #

• 封装检查逻辑为函数，每次触发事件后调用
  把判断laser是否显示的逻辑抽成独立函数，在每个mouseenter事件回调里执行一次，这样每次添加hover类后都会检查条件：

const circle = document.querySelector('#circle');
const circleTwo = document.querySelector('#circle2');
const laser = document.getElementById('laser');

// 封装检查逻辑
function checkLaserDisplay() {
    const bothHovered = circle?.classList.contains('hover') && circleTwo?.classList.contains('hover');
    laser.style.display = bothHovered ? 'block' : 'none';
}

if (circle) {
    circle.addEventListener('mouseenter', () => {
        circle.classList.add('hover');
        checkLaserDisplay(); // 添加类后检查
    });
    // 可选：添加mouseleave事件移除类，同时检查
    circle.addEventListener('mouseleave', () => {
        circle.classList.remove('hover');
        checkLaserDisplay();
    });
}

if (circleTwo) {
    circleTwo.addEventListener('mouseenter', () => {
        circleTwo.classList.add('hover');
        checkLaserDisplay(); // 添加类后检查
    });
    // 可选：添加mouseleave事件移除类，同时检查
    circleTwo.addEventListener('mouseleave', () => {
        circleTwo.classList.remove('hover');
        checkLaserDisplay();
    });
}

// 初始化时检查一次（可选）
checkLaserDisplay();

• 额外注意事项
  1. 确保laser元素默认是display:none，可以在CSS里设置：

     #laser {
         display: none;
     }
     

  2. 使用可选链操作符?.避免元素不存在时的报错，提升代码健壮性。

其他思路（可选） #

如果不想在每个事件里手动调用检查函数，可以用MutationObserver监听两个圆形元素的class属性变化，当类发生改变时自动执行检查逻辑：

const circle = document.querySelector('#circle');
const circleTwo = document.querySelector('#circle2');
const laser = document.getElementById('laser');

function checkLaserDisplay() {
    const bothHovered = circle?.classList.contains('hover') && circleTwo?.classList.contains('hover');
    laser.style.display = bothHovered ? 'block' : 'none';
}

// 创建观察者实例
const observer = new MutationObserver(checkLaserDisplay);

// 监听元素的class属性变化
if (circle) observer.observe(circle, { attributes: true, attributeFilter: ['class'] });
if (circleTwo) observer.observe(circleTwo, { attributes: true, attributeFilter: ['class'] });

// 初始化检查
checkLaserDisplay();

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