How to implement mouse hover functionality in interface form

Can you share some sample?

Hi Gayathris- Thanks for replying.

below is the screen print for your reference. the one shared interface form having multiple tiles. so, now want to if mouse hover to particular tile that tile should be some appear. 

I used card layout and also created local variable, a!dynamicLink () function.

when mouse drag to any tile the tile border is highlighting. same i want entire tile should change bit when mouse drag to tile. 

Hi Gayathris- Thanks for replying.

below is the screen print for your reference. the one shared interface form having multiple tiles. so, now want to if mouse hover to particular tile that tile should be some appear. 

I used card layout and also created local variable, a!dynamicLink () function.

when mouse drag to any tile the tile border is highlighting. same i want entire tile should change bit when mouse drag to tile. 

Can tooltip be helpful here?

a!cardLayout(
  tooltip:"tooltip",
  contents :a!richTextDisplayField(
    align: "CENTER",
    value:a!richTextItem(
      text:"Label",
      color:"ACCENT"
      
    )
  )
)

Here is the exact requirement what i am looking.

first screen is actual screen print.

the second screen print i mouse hover on "All Courses" tile.

if you observe the tile is bit highlighting right.

i am sharing link to understand more.academy.appian.com/

Thank you.

Got it, that's highlight is happening because there is link in the card layout. If you want ,you can give a link for the use to click and perform some action.

a!cardLayout(
link: a!dynamicLink(),
tooltip: "tooltip",
contents: a!richTextDisplayField(
align: "CENTER",
value: a!richTextItem(
text: "Label",
color: "ACCENT",
link: a!dynamicLink(),
linkStyle: "STANDALONE"
)
)
)

can't we use single dynamic link instead of two dynamic links ?.

because, i used a!dynamicLink() for entire cardLayout()

Yes we, can

Thanks. But, if we  use above code we can not get exact functionality as i mentioned screen prints right.

the code which is shared by you just highlight the tile border only because of "Linkstyle". am i correct ?

a!cardLayout(
contents:{
},
linkstyle:"STANDALONE" or "INLINE"
)

The CardLayout does not have a linkStyle parameter. You can not modify the mouseOver behavior of it.

Hi Helzle, sorry my bad.

You are correct. Link style parameter applies to only dynamicLink() function not to cardLayout(). How do I achieve what I require.

Maybe you can try to nest multiple card layouts and use padding to increase the distance from border to content.

My question would be, why is it so important to have a mouseover behave exactly like this?

not exactly. UI design team given UI screens. we need to develop  as per UI design