title: How to access an array elements child, while looping?
body: <p>I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%".</p>
  
  <p>The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. 
  Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function loopDivs() {
    divArray.forEach(div =&gt; {
      div.addEventListener("mouseover", showDetails);
  
      function showDetails() {
        tlDetails = new TimelineLite();
  
        tlDetails
          .to(".div-desc", 0.5, {
            top: "0%"
          });
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="home-about" class="div-pics div-left"&gt;
    &lt;h1 class="div-title"&gt;About&lt;/h1&gt;
    &lt;div class="div-desc dl"&gt;
      &lt;div class="div-arrow"&gt;
        &lt;div class="arrow-part arrow-top"&gt;&lt;/div&gt;
        &lt;div class="arrow-part arrow-bottom"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;p class="div-text dt-left"&gt;
        Lorem ipsum ...
      &lt;/p&gt;
      &lt;li class="div-link"&gt;&lt;a href="#"&gt;Order parts&lt;/a&gt;&lt;/li&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help will be highly appreciated (:</p>