-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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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