Javascript 如何利用event.target将JS函数合并为一个函数？

我有一个有12个按钮的沙发。每个都有mouseenter（）的EventListener。当用户滚动一个按钮时，其他11个按钮淡出。我有足够的代码让你的眼睛流血。但是我很难将其整合到一个函数中，而只是使用event.target

我可以进行基本操作，但在插入for循环（我相信需要一个continue）以淡出其他每个按钮时遇到问题，不包括悬停在上面的按钮（我的event.target元素）。您可以在我的代码中看到，目前我为其他每个按钮都有一行代码，用于在其上运行不透明度淡入淡出循环。如何将其整合到单个函数中

下面是我每次滚动按钮时运行的代码：

function fadeOut01() {
var op = 1;  // initial opacity
var timer = setInterval(function () {
    if (op <= 0.1){
        clearInterval(timer);
    }
    box02.style.opacity = op;
    box03.style.opacity = op;
    box04.style.opacity = op;
    box05.style.opacity = op;
    box06.style.opacity = op;
    box07.style.opacity = op;
    box08.style.opacity = op;
    box09.style.opacity = op;
    box10.style.opacity = op;
    box11.style.opacity = op;
    box12.style.opacity = op;
    op -= op * 0.1;
}, 20);
}

功能淡出01（）{
var op=1；//初始不透明度
变量计时器=设置间隔（函数（）{
如果（op如果我正确理解了你的问题，这应该可以通过以下方式解决-请参阅下面的评论，以获取有关如何工作的上下文信息：


/*查询网格包装器的所有网格，并对每个网格应用相同的悬停行为*/
document.querySelectorAll（'.grid wrapper.grids'）.forEach（函数（元素）{
/*获取包含网格元素的网格包装器*/
const gridWrapper=document.querySelector（“.grid wrapper”）；
/*添加鼠标悬停事件，并为包装器和
网格元素*/
元素。addEventListener（'mouseover'，function（）{
元素.classList.add（'hover'）；
gridWrapper.classList.add（'hover'）；
});
/*添加鼠标移出事件并删除包装器和
网格元素*/
元素。addEventListener（'mouseout'，function（）{
element.classList.remove（'hover'）；
gridWrapper.classList.remove（'hover'）；
});
})；
.grid wrapper.grids{
/*设置栅格包装栅格的默认不透明度*/
不透明度：1；
/*指定.grids的不透明度属性的转换行为。
转换将花费.35秒，并延迟.1秒以减少闪烁
在网格之间快速移动时*/
过渡：不透明度0.35s线性0.1s；
/*刚刚为演示添加的额外样式*/
显示：内联块；
宽度：150px；
高度：100px；
背景：灰色；
利润率：10px；
}
/*当.hover修饰符类应用于包装器时，导致
默认情况下，子项（.grid）将淡出（我们将阻止/覆盖此项）
悬停以实现的实际网格子级的默认行为
期望的最终结果）*/
.grid-wrapper.hover.grids{
不透明度：0.1；
}
/*覆盖正在创建的实际网格的默认网格包装器悬停
盘旋以确保
它仍然可见*/
.grid-wrapper.hover.grids.hover{
不透明度：1
}

视频
广播
绘图
数字看板
三维
虚拟集
打印
技术指导
现场活动
摄影
工作流自动化
我们的客户
如果我正确理解了您的问题，这应该可以通过以下方式解决-请参阅下面的评论，以获取有关如何工作的上下文信息：


/*查询网格包装器的所有网格，并对每个网格应用相同的悬停行为*/
document.querySelectorAll（'.grid wrapper.grids'）.forEach（函数（元素）{
/*获取包含网格元素的网格包装器*/
const gridWrapper=document.querySelector（“.grid wrapper”）；
/*添加鼠标悬停事件，并为包装器和
网格元素*/
元素。addEventListener（'mouseover'，function（）{
元素.classList.add（'hover'）；
gridWrapper.classList.add（'hover'）；
});
/*添加鼠标移出事件并删除包装器和
网格元素*/
元素。addEventListener（'mouseout'，function（）{
element.classList.remove（'hover'）；
gridWrapper.classList.remove（'hover'）；
});
})；
.grid wrapper.grids{
/*设置栅格包装栅格的默认不透明度*/
不透明度：1；
/*指定.grids的不透明度属性的转换行为。
转换将花费.35秒，并延迟.1秒以减少闪烁
在网格之间快速移动时*/
过渡：不透明度0.35s线性0.1s；
/*刚刚为演示添加的额外样式*/
显示：内联块；
宽度：150px；
高度：100px；
背景：灰色；
利润率：10px；
}
/*当.hover修饰符类应用于包装器时，导致
默认情况下，子项（.grid）将淡出（我们将阻止/覆盖此项）
悬停以实现的实际网格子级的默认行为
期望的最终结果）*/
.grid-wrapper.hover.grids{
不透明度：0.1；
}
/*覆盖正在创建的实际网格的默认网格包装器悬停
盘旋以确保
它仍然可见*/
.grid-wrapper.hover.grids.hover{
不透明度：1
}

视频
广播
绘图
数字看板
三维
虚拟集
打印
技术指导
现场活动
摄影
工作流自动化
我们的客户
什么是
box02
，
box03
，等等？听起来你应该使用类而不是box02、03等等。其他11个按钮/框。当用户悬停在一个框上时，它们都会消失。你可以在www.finleyfilms.com上看到。这甚至需要JavaScript吗？你不能用CSS来完成吗？我想我的问题（除了不熟悉这一点和自我训练之外）是我不知道如何处理访问“这个类的所有其他对象，除了鼠标悬停的对象”。有什么想法吗？再次，请将定义所有框的位置张贴出来。
box02
，
box03
，等等？听起来你应该使用类而不是box02、03等等。其他11个按钮/框。当用户将鼠标悬停在一个框上时，它们都会消失。你可以在www.finleymels.com.Does上看到它
<a href="ffvideo.html"><div id="grid01" class="grids"><div class="gridText">video</div></div></a>
        <a href="ffbroadcast.html"><div id="grid02" class="grids"><div class="gridText">broadcast</div></div></a>
        <a href="ffgraphics.html"><div id="grid03" class="grids"><div class="gridText">graphics</div></div></a>
        <a href="ffsignage.html"><div id="grid04" class="grids"><div class="gridText">digital signage</div></div></a>
        <div id="grid05" class="grids"><div class="gridText">3d</div></div>
        <div id="grid06" class="grids"><div class="gridText">virtual sets</div></div>
        <div id="grid07" class="grids"><div class="gridText">print</div></div>
        <div id="grid08" class="grids"><div class="gridText">technical direction</div></div>
        <div id="grid09" class="grids"><div class="gridText">live events</div></div>
        <div id="grid10" class="grids"><div class="gridText">photography</div></div>
        <div id="grid11" class="grids"><div class="gridText">workflow automation</div></div>
        <a href="fflogos.html"><div id="grid12" class="grids"><div class="gridText">our clients</div></div></a>