Question

我将主页分为“ .div-pics”类的4个div。我的目标是每次您将鼠标悬停在其中一个上时，就会出现带有“ .div-desc”类的描述。动画通过Greensock TimelineLite发生，并且描述div的初始位置为“顶部：100％”。

我当前拥有的代码有效，但是效果不理想。现在，将鼠标悬停在任何div（.div-pics）上后，所有描述div（.div-desc）都会出现。相反，我只希望将鼠标悬停的div的描述显示在屏幕上，但是我不知道如何定位它。

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

Answer 1

当您通过tlsDetails.to(".div-desc", 0.5, {top: "0%"});时，似乎querySelectorAll正在使用".div-desc"

我建议从dom传递mouseevent。

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

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

查看GreenSock文档，我发现您可以将目标元素作为第一个参数。相对于它可以找到的所有.div-desc类，这应该给您一个适当的目标。

Answer 2

function loopDivs() {
    var i = 0;
    divArray.forEach(div => {
        div.addEventListener("mouseover", showDetails(i));

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

            var divDesc = document.getElementByClassName(".div-desc");

            tlDetails
                .to(divDesc[i], 0.5, {
                    top: "0%"
                });
        }
    });
}

这是未经测试的，所以我不是100％肯定会奏效，但是存在一个可能解决方案的想法，首先请确保您可以访问每个div的索引，然后使用某种形式的文档调用来获取div，然后只需将要设置动画的元素的索引传递到补间即可。

循环时如何访问数组元素子级？

2 个答案: