Подскажите пожалуйста как применить тень при наведении ко всем блокам с классом even-link(и наоборот ко всем блокам с классом odd-link)? Применяется сейчас только к одному блоку. Спасибо
https://jsfiddle.net/3fgzvohq/1/
let oddLinks = document.querySelectorAll(".odd-link");
let evenLinks = document.querySelectorAll(".even-link");
const lerp = (a, b, t) => (1 - t) * a + t * b;
const shadowColor = 'rgba(0, 0, 0, 0.5)';
let activeEl = null;
const grid = document.querySelector('.center-menu__items');
const gridShadow = document.querySelector('.center-menu--shadow');
const itemsShadow = Array.from(
gridShadow.querySelectorAll('.item'),
el => ({ el, currH: 0, prevH: 0 })
);
function update() {
itemsShadow.forEach(it => {
const targetH = it.el.dataset.id === activeEl?.dataset.id ? 80 : 0;
it.currH = lerp(it.prevH, targetH, 0.05);
it.currH = Math.abs(it.currH - targetH) < 1 ? targetH : it.currH;
it.prevH = it.currH;
const blurRadius = it.currH / 4;
const spreadRadius = it.currH / 4;
it.el.style.boxShadow = `0 0 ${blurRadius}px ${spreadRadius}px ${shadowColor}`;
});
requestAnimationFrame(update);
}
grid.addEventListener('mouseover', (e) => {
if (!e.target.classList.contains('.even-link')) {
evenLinks.forEach((evenLinks) => evenLinks.classList.add("_active"));
oddLinks.forEach((oddLink) => oddLink.classList.remove("_active"));
activeEl = e.target.closest('.item');
}
if (!e.target.classList.contains('.odd-link')) {
oddLinks.forEach((oddLink) => oddLink.classList.add("_active"));
evenLinks.forEach((evenLinks) => evenLinks.classList.remove("_active"));
activeEl = e.target.closest('.item');
}
});
grid.addEventListener('mouseleave', (e) => {
if (!e.target.classList.contains('.even-link')) {
activeEl = null;
}
if (!e.target.classList.contains('.odd-link')) {
activeEl = null;
}
});
requestAnimationFrame(update);
.menu__center {
background: #161616;
width: 100%;
height: 100vh;
}
.center-menu__column {
display: flex;
flex: 1 1 50%;
min-height: 100vh;
}
.center-menu__block {
flex: 1 1 300px;
display: flex;
flex-direction: column;
}
.center-menu__link-1 {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #161616;
flex: 1 1 380px;
font-weight: 700;
font-size: 50px;
line-height: 61px;
text-align: center;
color: #ffffff;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
padding: 10px;
transition: all 0.6s ease 0s;
position: relative;
}
.center-menu__link-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 1 50%;
background: #161616;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
font-weight: 400;
font-size: 40px;
line-height: 49px;
text-align: center;
letter-spacing: 0.1em;
color: #ccba96;
padding: 10px;
transition: all 0.8s ease 0s;
}
.center-menu__link-3 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 1 50%;
background: #161616;
box-shadow: 12px 0px 40px rgba(0, 0, 0, 0.5);
font-weight: 700;
font-size: 40px;
line-height: 49px;
text-align: center;
letter-spacing: 0.1em;
color: #b99c63;
padding: 10px;
transition: all 0.6s ease 0s;
position: relative;
}
.center-menu--shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.center-menu--shadow .item {
background-color: transparent;
}
<div class="menu__center center-menu">
<div class="center-menu__items">
<div class="center-menu__column">
<div class="item center-menu__link-1 odd-link" data-id="1"><span>нечетный</span></div>
<div class="center-menu__block">
<a href="#" class="item center-menu__link-2 even-link" data-id="2"><span>четный</span></a>
<a href="#" class="item center-menu__link-3 odd-link" data-id="3"><span>нечетный</span></a>
</div>
</div>
</div>
<div class="center-menu__items center-menu--shadow">
<div class="center-menu__column">
<div class="item center-menu__link-1" data-id="1"><span></span></div>
<div class="center-menu__block">
<a href="#" class="item center-menu__link-2" data-id="2"><span></span></a>
<a href="#" class="item center-menu__link-3" data-id="3"><span></span></a>
</div>
</div>
</div>
</div>