悬停一个元素时修改另一无层级关联元素颜色的实现问题

问题根源 #

现有代码仅在页面首次加载时执行一次悬停状态判断，不会持续监听元素的悬停动作，因此无法实现动态交互效果。

正确实现方案 #

为触发元素绑定mouseenter（鼠标移入）和mouseleave（鼠标移出）事件，在事件回调中修改目标元素样式即可，代码示例如下：

<script>
var circleOne = document.querySelector('.first_circle');
var adressOne = document.querySelector('.first_adress');

// 鼠标悬停触发元素时执行
circleOne.addEventListener('mouseenter', function() {
    adressOne.style.color = 'green';
});

// 鼠标离开触发元素时执行
circleOne.addEventListener('mouseleave', function() {
    adressOne.style.color = 'black';
});
</script>

优化建议 #

• 如果有多组关联元素需要实现相同效果，可以封装为通用函数复用逻辑：

function setHoverRelation(triggerSelector, targetSelector, hoverColor, defaultColor = 'black') {
    const trigger = document.querySelector(triggerSelector);
    const target = document.querySelector(targetSelector);
    if (!trigger || !target) return;
    trigger.addEventListener('mouseenter', () => target.style.color = hoverColor);
    trigger.addEventListener('mouseleave', () => target.style.color = defaultColor);
}
// 调用示例
setHoverRelation('.first_circle', '.first_adress', 'green');
setHoverRelation('.second_circle', '.second_adress', 'blue');

• 更推荐通过切换类名的方式修改样式，降低JS和CSS的耦合度，后续调整样式无需修改JS代码：

/* CSS中提前定义高亮样式 */
.address-highlight {
    color: green;
}

// JS中仅修改类名
circleOne.addEventListener('mouseenter', () => adressOne.classList.add('address-highlight'));
circleOne.addEventListener('mouseleave', () => adressOne.classList.remove('address-highlight'));

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