Hover

Ask the community
,
1

Hey Y’all, do you know how I can create a hover effect with the text below I know how to do it with the circle but I want the same to happen with the text that when I hover over the circle the text appears?

1024×575 35.5 KB

2

Use $w.onMouseIn() https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
and push the relevant text to it.
/first ceate an array of texts

const texts = [
"aaaaa",//text1
"bbbb",//text2
"cccc",
"dddd",
"eee"
];
$w("text1").text = "";
$w("#element1, #element2, #element3, #element4, #element5").onMouseIn( (event) => {
let targetId = event.target.id;
let index = Number(targetId[targetId.length - 1]) -1;
$w("text1").text = texts[index];
})
3

Simple. When you do your onMouseIn code for the circle above, simply have the appropriate text to show in the code too.

If you set circle 1 and text 1 to be show at the start, then the rest can be set to hidden on load and easily shown when the mouse is moved over the other circles as needed.

You can simply just use the onMouseIn function along with the .show() function for each circle and text, or you could include the onMouseOut function and the .hide() functions too so that the circles and text are hidden again when the user moves the mouse away from the circles.

https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut

https://www.wix.com/corvid/reference/$w.HiddenMixin.html (show and hide functions)

If you are starting with no text showing under the circles, then you can look at using .expand() or .collapse() instead so that the elements don’t take up any room on your page.

You will also need to set the text elements to be collapsed on load too and not simply hidden on load.

To do the onMouseIn and onMouseOut and hidden or collapsed on load, you need to add these to each of the elements properties panel.

Remember though that onMouse will not work on mobile devices, so you will need to either not use it on mobile editor or set your code to include the onClick event through Wix Window API and it’s Form Factor function.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only

4

Of course this specific code will only i you circle names ends with 1,2,3 etc…
You can plan it differently

5

Can I talk to you on twitter instead

6

I don’t have a twitter account. You an ether ask me here, or read the Whiskey’s references (very recommended).

7

and basically it’s quite i’s quite simple, onMouseIn() populate the text box. (I don’t have to do it exactly as did, I tried to make the code short)