-1

Подскажите пожалуйста как применить тень при наведении ко всем блокам с классом 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>

2 ответа 2

1

let odd = document.getElementsByClassName('odd-link');
let even = document.getElementsByClassName('even-link');


for (let i = 0; i < odd.length; i++) {
  odd[i].addEventListener('mouseenter', function() {
    for (let i = 0; i < odd.length; i++) {
      odd[i].classList.add('shadow');
    }
  });

  odd[i].addEventListener('mouseleave', function() {
    for (let i = 0; i < odd.length; i++) {
      odd[i].classList.remove('shadow');
    }
  });
}

for (let i = 0; i < even.length; i++) {
  even[i].addEventListener('mouseenter', function() {
    for (let i = 0; i < even.length; i++) {
      even[i].classList.add('shadow');
    }
  });

  even[i].addEventListener('mouseleave', function() {
    for (let i = 0; i < even.length; i++) {
      even[i].classList.remove('shadow');
    }
  });
}
div {
  width: 30px;
  height: 30px;
  display: inline-block;
  border: 1px solid black;
}

.shadow {
  box-shadow: 0px 0px 10px black;
}
<div class="odd-link"></div>
<div class="even-link"></div>
<div class="odd-link"></div>
<div class="even-link"></div>
<div class="odd-link"></div>
<div class="even-link"></div>

1

Можно что-то такое сделать..

let odd = document.getElementsByClassName('odd-link');
let even = document.getElementsByClassName('even-link');

addListener(odd);
addListener(even);

function addListener(elem) {
  for (let i = 0; i < elem.length; i++) {
    elem[i].addEventListener('mouseout', toggleShadow);
    elem[i].addEventListener('mouseover', toggleShadow);
  }
}

function toggleShadow() {
  let elem = document.querySelectorAll('.shadow');
  if (!elem[0]) elem = document.querySelectorAll('.' + this.getAttribute('class'));
  for (let i = 0; i < elem.length; i++) elem[i].classList.toggle('shadow');
}
div {
  width: 30px;
  height: 30px;
  display: inline-block;
  border: 1px solid black;
}

.shadow {
  box-shadow: 0px 0px 10px black;
}
<div class="odd-link"></div>
<div class="even-link"></div>
<div class="odd-link"></div>
<div class="even-link"></div>
<div class="odd-link"></div>
<div class="even-link"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.