因此。默认情况下，team__bio是隐藏的，当你将鼠标悬停在一个特定的团队图像上时，生物弹出到一边（我的这部分工作正常），其余的图像会对它们产生黑暗的叠加效果（图像除外）你在徘徊，这是我需要帮助的部分！）。我已经考虑过采用这两种不同的方式，一种是通过创建一个叠加“元素”并使用CSS设置样式，以便当您将鼠标悬停在一个图像上时它只是“可见”（这将更多地覆盖在整个页面上，我实际上并不需要，我只需要对图像产生影响）。
或者我已经考虑过尝试使用JavaScript实现这一点，可能会循环遍历team__member并且onmouseover将覆盖应用于所有team__image元素，除了当前鼠标已经过了。
这是我的HTML，请告诉我你将如何使用我的HTML进行此操作！非常感谢你!!
我只能使用VANILLA JS btw
<section class="team">
<h1 class="team__heading">meet the team</h1>
<p class="team__para">Bunch of people doing creative things.</p>
<div class="grid">
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Star stuff harvesting star light globular star cluster citizens of distant epochs extraplanetary a mote of dust suspended in a sunbeam Drake Equation, dream of the mind's eye, astonishment sed quia non numquam eius modi tempora incidunt ut labore
et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Are creatures of the cosmos network of wormholes consectetur Cambrian explosion realm of the galaxies Flatland vanquish the impossible with pretty stories for which there's little good evidence cosmic ocean citizens of distant epochs finite
but unbounded trillion, quasar quis nostrum exercitationem ullam corporis suscipit laboriosam Orion's sword, vanquish the impossible.</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Billions upon billions tendrils of gossamer clouds, dispassionate extraterrestrial observer consectetur lorem ipsum dolor sit amet a very small stage in a vast cosmic arena, cosmic ocean consectetur and billions upon billions upon billions upon
billions upon billions upon billions upon billions.</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Drake Equation Vangelis hydrogen atoms Cambrian explosion paroxysm of global death made in the interiors of collapsing stars consectetur adipisicing elit a very small stage in a vast cosmic arena?</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Drake Equation Vangelis hydrogen atoms Cambrian explosion paroxysm of global death made in the interiors of collapsing stars consectetur adipisicing elit a very small stage in a vast cosmic arena?</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Encyclopaedia galactica prime number encyclopaedia galactica made in the interiors of collapsing stars, tesseract inconspicuous motes of rock and gas dispassionate extraterrestrial observer cosmos, a still more glorious dawn awaits rogue vastness
is bearable only through love venture rich in mystery from which we spring the ash of stellar alchemy.</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Encyclopaedia galactica prime number encyclopaedia galactica made in the interiors of collapsing stars, tesseract inconspicuous motes of rock and gas dispassionate extraterrestrial observer cosmos.</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Encyclopaedia galactica prime number encyclopaedia galactica made in the interiors of collapsing stars, tesseract inconspicuous motes of rock and gas dispassionate extraterrestrial observer cosmos.</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">The last person we talked to said this would be ready prethink, so upsell but new economy, not enough bandwidth. Blue sky thinking value-added, and first-order optimal strategies or diversify kpis.</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Put your feelers out. Can we take this offline knowledge is power overcome key issues to meet key milestones obviously. Cloud strategy moving the goalposts. Blue sky thinking show pony if you want to motivate these clowns.</p>
</div>
</section>
</div>
<div class="grid__item">
<section class="team__member">
<img class="team__image" src="http://fillmurray.com/400/400" alt="name of team member" />
<div class="team__content">
<h2 class="team__name">John Smith</h2>
<p class="team__bio">Put your feelers out. Can we take this offline knowledge is power overcome key issues to meet key milestones obviously. Cloud strategy moving the goalposts. Blue sky thinking show pony if you want to motivate these clowns.</p>
</div>
</section>
</div>
</div>
</section>