Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gubbels

Different text displays on hover

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 post
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 post
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 post
Share on other sites

I used jquery to speed up the process hahaha .
But basically the dynamic consists of linking the text to the clicked element, and the text you can change to the correct using the data attribute, or if you prefer using an array with in the javascript itself.

  • Like 1
Link to post
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.

×