Mouse Over Effect Idea - Can anyone think of a way to do it?

I’m brainstorming for a project and this idea has become something I’m intrigued in seeing if it’s possible to make.

So my idea was when you hover over text that says Hello, it would change/roll to another language’s hello, like Hola, and then when you hover again, it changes to Bonjour, and it keeps going on depending on how many types of hellos you put until it circles back to the original Hello.

Idk, thought it’d be a cool effect. Its probably over my head right now but it’d be cool to see if someone knew how to do it. If not, its cool too

Not sure if this is the best approach but the way I would do it:

  • Select the element (span maybe?) using JS
  • Create an array with different translations of the world
  • Add a mouseover event listener on the element
  • Create a function that selects a random element from the array and change the text content of the element for the corresponding one

If I wanted to do it with multiple words I would probably create an object, setting the key as the original word (in English I assume) then the value as an array of multiple translations. On mouse over, I would check for a matching word on such object, then select a value at random and replace the text.

Hope it helps!

1 Like

Yep, over my head! I havent started JS just yet, but its good to know that I’m not far off. Its next on my learning list.

Thank you for answering! You really know your stuff for just being able to think and type it out. I’m going to implement it once I learn it/understand what you mean. :smile:

Glad to help. Don’t worry to much about this just yet. after you go throught he JS route on FCC and experiment a bit it will come out naturally for you.
I actually have a harder time choosing a color scheme or a background image :smile:

Good luck!