How to add an element on hover?

Ask the community
1

I am trying to make it so that when you hover over the circle, the white box with text appears to the side.


I have tried putting the circle, text box, and white rectangle in a container and applying the effect to the container, which worked fine, except if you hover over anywhere inside the container (including over where the words would be on hover), the hover mode is activated. Instead, I only want hover mode to be activated when the circle is hovered over.

2

This would be a good device to use… specially with Map images

3

I ve just done the same thing with great help from @hershido I can explain and screenshare. DM me, happy to help👌🏻

4

Awesome! Do you mind posting the video here?

5

@madisonpd3
I attached a video of 2 options of how this can be achieved:

  1. Velo
  2. Hover interactions - (the new hover interactions are not rolled out to all users yet - lmk if you don’t have it)

This is the code I used in my examples, if you use it make sure to change the relevant ID’s.

$w . onReady ( function () {
$w ( ‘#trigger’ ). onMouseIn (() => {
$w ( ‘#box1’ ). show ( ‘fade’ , { duration : 250 });
})

$w ( '#trigger' ). onMouseOut (() => { 
    $w ( '#box1' ). hide ( 'fade' , {  duration :  250  }); 
})

});

Hope this helps,
Ido.

6

If you do have the older hover interactions, you can also use negative margins and 0% opacity on the initial state to display on hover.