JavaScript实现悬停按钮仅修改当前tab内text元素颜色

现有基础代码 #

初始CSS #

.tab{border: 1px solid black;}

初始HTML结构 #

<div class="tab">
    <div class="img">
        <button>HOVER</button>
    </div>
    <div class="text">
        <p>Byt 3+kk s parkovacím stáním</p>
        <p>PARDUBICE</p>
    </div>
</div>
<div class="tab">
    <div class="img">
        <button>HOVER</button>
    </div>
    <div class="text">
        <p>Byt 3+kk s parkovacím stáním</p>
        <p>PARDUBICE</p>
    </div>
</div>
<div class="tab">
    <div class="img">
        <button>HOVER</button>
    </div>
    <div class="text">
        <p>Byt 3+kk s parkovacím stáním</p>
        <p>PARDUBICE</p>
    </div>
</div>

实现目标 #

鼠标悬停在button上时，仅修改该按钮所属.tab父容器内.text元素的文字颜色，其余.tab内的.text样式不受影响。

实现方式 #

纯CSS方案（现代浏览器适用） #

不需要改动HTML结构，借助:has()伪类直接匹配包含悬停按钮的.tab容器即可，追加如下CSS：

/* 颜色值可自行替换为需要的色值 */
.tab:has(button:hover) .text {
    color: #f00;
}

:has() 支持Chrome 105+、Firefox 121+、Safari 15.4+版本，覆盖绝大多数主流用户场景。如果需要兼容更低版本浏览器，使用下面的JS方案。

JS兼容方案（全版本浏览器支持） #

1. 先追加高亮样式类到CSS中：

.text-hover {
    color: #f00; /* 替换为目标文字颜色 */
}

2. 追加如下JS代码，通过事件委托监听按钮悬停状态，仅操作当前父容器内的元素：

document.addEventListener('mouseover', e => {
    if (e.target.matches('button')) {
        const tab = e.target.closest('.tab')
        tab?.querySelector('.text')?.classList.add('text-hover')
    }
})
document.addEventListener('mouseout', e => {
    if (e.target.matches('button')) {
        const tab = e.target.closest('.tab')
        tab?.querySelector('.text')?.classList.remove('text-hover')
    }
})

内容的提问来源于stack exchange，提问作者Martin Kopečný