Как получить доступ к элементам массива дочерних, при цикле? - PullRequest
Новая
       10

Как получить доступ к элементам массива дочерних, при цикле?

1 голос
/ 30 мая 2019

Я разделил свою домашнюю страницу на 4 деления с классом ".div-pics".И моя цель - каждый раз, когда вы наводите курсор на одно из них, появляется описание / с классом ".div-desc".Анимация происходит через Greensock TimelineLite, и начальная позиция описания div'ов - это «top: 100%».

Код, который у меня сейчас есть, работает, но не с желаемым эффектом.Прямо сейчас, когда вы наведете курсор на любой из элементов div (.div-pics), появятся все элементы описания div (.div-desc).Вместо этого я хотел бы, чтобы на экране появилось только описание находящегося под водой элемента, но я не знаю, как на него нацелиться.

<div id="home-about" class="div-pics div-left">
        <h1 class="div-title">About</h1>
        <div class="div-desc dl">
          <div class="div-arrow">
            <div class="arrow-part arrow-top"></div>
            <div class="arrow-part arrow-bottom"></div>
          </div>
          <p class="div-text dt-left">
            Lorem ipsum ...
          </p>
          <li class="div-link"><a href="#">Order parts</a></li>
        </div>
</div>
```html





```javascript
function loopDivs() {
    divArray.forEach(div => {
        div.addEventListener("mouseover", showDetails);

        function showDetails() {
            tlDetails = new TimelineLite();

            tlDetails
                .to(".div-desc", 0.5, {
                    top: "0%"
                });
        }
    });
}
```javascript


Any help will be highly appreciated (:

1 Ответ

0 голосов
/ 30 мая 2019

Похоже, tlsDetails.to(".div-desc", 0.5, {top: "0%"}); может использовать querySelectorAll при передаче ".div-desc"

Я бы посоветовал передать мышь из дома. 

function showDetails(event) {
  tlsDetails = new TimelineLite();

  tlsDetails.to(event.target, 0.5, {
    top: "0%"
  });
}

просматривая документы GreenSock, я обнаружил, что вы можете вставить целевой элемент в качестве первого параметра. Это должно дать вам правильную цель против ВСЕХ .div-desc классов, которые он может найти.

...