How to access an array elements child, while looping?

[Elitzca]

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%".

 

 

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.

 

!     

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%".

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.

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

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

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

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

event.target - instead of ".div-desc"

 

won't work since  in my case I can't hover the .div-desc, because it is sent all the way down and it's invisible. My idea is to hover its parent and then it would appear.

 

Thanks in advance!

[Visual-Q]

If you're doing it in vanilla I would expect you'd want to target a child node:

 

https://www.w3schools.com/jsref/prop_node_childnodes.asp

 

https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

 

https://stackoverflow.com/questions/16302045/finding-child-element-of-parent-pure-javascript

[Jonathan]

Hello @Elitzca and Welcome to the GreenSock Forum!

 

Is there any reason why your not referencing this for the current node your hovering over? Then you wont have to specify that simple class selector targeting all elements with those classes. That will allow you to target this, which will be the element your currently hovering over.

 

this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

 

You can see in the following codepen examples of running a loop to bind hover events to multiple elements. Then associating a timeline with each element and storing that timeline in the nodes properties to be accessed when hovering over each element.

 

Even though the below examples use jQuery for the loop, the technique is the same for vanilla JavaScript.

 

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

 

and this one too

 

See the Pen rOgVEd by jonathan (@jonathan) on CodePen

 

I also noticed your HTML markup is malformed. You have an <li> tag with no parent of <ul> or <ol> in your above HTML markup.

 

So you have this:

 

<li class="div-link"><a href="#">Order parts</a></li>

 

It should be this with the <ul> or <ol>:

 

<ul>
  <li class="div-link"><a href="#">Order parts</a></li>
</ul>

 

If you provide a limited codepen we will be more than happy to help you figure out what your trying to do. Here is a link to how to create a limited codepen demo example so we can test your code live.

 

 

Happy Tweening!