Problem trying to make hover effect

Ask the community
1

I’ve designed a vertical navigation bar with menu items, which I want to change their color when the mouse enters them. The interaction (open overlay) is set relative to the item (self) center, not the main container; however, the overlay opens at the top of it. I was able to make it work before, but I don’t know what’s happening now.

2

instead of the hovered entry appearing at the top of the menu, it should overlay its corresponding menu item, so it looks as if it changes color – is that correct?

3

In this case:

  • Create two instances of the menu entry: the hovered and the non-hovered state.
  • Put the non-hovered state on the board you use as your screen, put the hovered state off-board
  • Give the hovered state a name, like menu_home_hovered
  • Set on the non-hovered state in the interaction tab:
    • Trigger: mouse-enter; action: open overlay; destination: menu_home_hovered (or whatever name you choose); position manual
    • position the position indicator on top of the un-hovered instance (don’t position the hovered instance itself over the un-hovered instance)
  • On the hovered instance (placed off-board)
    • set as interaction: trigger: mouse leave; action: close overlay; Destination: self

And now, you should have one menu entry that has an hover effect. This is how it looks on my file:

several components placed in a file to make the hover effect work
several components placed in a file to make the hover effect work1105×786 33.6 KB

(I did not line up the overlay position indicator and the unhovered instance perfectly to show how it works)

4

Thanks. Setting the position manual seems to solve the issue. I’m confused about why the overlay opens at the top of the container board instead of the item (self) when any other option is selected though.

5

I’m confused about why the overlay opens at the top of the container board instead

That true. It might be a bug? I tried it in several variants and the behavior is erratic. For example for these settings:
destination:myg, relative to middleboard, position bottom right

and these nested boards it could be relative to:

grafik

I get this position:

grafik
grafik600×932 4.02 KB

Which is not entirely wrong (but also clearly off) IF I would have chosen the innerboard, but I set it to the middle one.

6

@myfunnyandy could you have a look at this? (I gladly would provide more info like the way it actually places the overlay, but so far I found only the “it seems to be off in some way”)

7

related: