Little help needed on hover event

Wappler General Need Help
1

Hi fellow wapplers,

Cheeky I know but I was hoping there might be some brighter spark than me (not hard) who could point me in the right direction in how to do something like on this page:

you see if you hover over the svg icons in the page you get a pricing panel appear. the bottom one (the vehicles) would be the first one i would try to get working as that seems the simplest (not cummalitive). It would seem to me (I could be very wrong) that the svgs/images in this section have a hover event, when you hover over it shows a div on the right.

But in wappler i cant seem to work out how to make a div show based on a hover event?

when i add a dynamic event to my link and use the select and then type show i only get a modal option, i have given my right hand div an ID etc.

sure its simple as wappler always has this stuff covered and I am just having an especially dim moment.

thanks in advance
Darren

PS if anyone has any pointers as well on how to do the top ones that would be wonderful :wink:

2

The same way as you can show/hide element on click - using a variable.
Add a variable in your app root. Select the element you want to be hovered add new dynamic attribute > mouse > mouse over > variable > set value > set your var value.
Do the same for all the elements.

Result:

hover_value

you can use this variable value to filter data / show hide elements etc.

3

as always, as super star :slight_smile: thanks Teodor

4

another problem :wink: how do i get the image to swap out on hover, i have made to svg files the same, one black and one pink, so when i hover i get my right hand div showing, but want the image to change to the pink one, is that possible?
thanks
Darren

5

What image are you referring to? The element you are hovering?

6

or i guess better is a change of class to alter te colour

7

yeah, the element i hover, think a class change on hover to make the svg pink

8

Yes, just change the element style on hover.

.my-element {
background: #fff;
}
.my-element:hover {
background: #000;
}

etc.

9

doh, stupid am i :wink:

thanks