Jump to content
Search Community
Gubbels test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi

First what I want to do. I have a slider with 4 pages and depending on the page I'm on, when hovering over a pre-specified element I want some text to display.

This text is otherwise (when not hovering over the element) hidden. I've been thinking about ideas how to do it and thought about something and I'm wondernig whether it's possible.

 

I give my "dots"  (as seen below)

    <div style="text-align:center">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>

a css active state and then display the appropriate text depending on which "dot" is active? If that wouldn't be possible, how else could I achieve this?

 

So far I only was able to display the text, which is otherwise hidden, when hovering over the pre-specified element.

 

All help is appreciated! Thanks in advance!

 

See the Pen gQEbdj by gabs97 (@gabs97) on CodePen

Link to comment
Share on other sites

Hello Gabriel, I do not know if this is what you wanted to do,
but I have adapted your pen so that it changes the contents of the hover text according to the clicked dot,
to achieve this I used the date attribute in the dots,  inserting the desired text.
Making it easier to manipulate via html, but could create the texts in other elements or via JavaScript.

And includes navigation with the prev and next buttons.

I hope this helps you in some way:
 

See the Pen QJoyvz by Noturnoo (@Noturnoo) on CodePen



Bonus: I put an opacity system in the dots to know which one is active.

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

12 hours ago, Noturnoo said:

Hello Gabriel, I do not know if this is what you wanted to do,
but I have adapted your pen so that it changes the contents of the hover text according to the clicked dot,
to achieve this I used the date attribute in the dots,  inserting the desired text.
Making it easier to manipulate via html, but could create the texts in other elements or via JavaScript.

And includes navigation with the prev and next buttons.

I hope this helps you in some way:
 

See the Pen QJoyvz by Noturnoo (@Noturnoo) on CodePen



Bonus: I put an opacity system in the dots to know which one is active.

Thanks for your help! However I think there's a problem in the code. 

I copy-pasted it into my code editor and the issue with me is:

once the animation loads in and neither the dots nor the prev/next arrow are clicked, the first text displayed is an incorrect one.

 

I'd fix this myself, however I've never worked with Jquery before, do you mind looking at this again?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...