Hover hierarchy

Hype-First-try.hype.zip (576.7 KB)

Hey there,

in my document i have different elements that change when you hover over them.
There is a circle like diagram at the right and a legend on the left.
Every section of the diagram can change its state by hovering over them (white outline), as well as the outline and inner outline of the diagram.
However, a) the objects often mistakenly “think” that they are hovered over
b) if i touch the inner outline the outer outline is also getting white. How can this be? Is there any way to reduce the “sensibility” of the hover effect?

Im new to hype and really need your help!

Thank you guys :slight_smile:


The problem is that the bounding box is square and the bounding box is the receiver of the click event not the shape.

But there is a lot above the outer outline. I even put a black mask around the bounding box in the shape of the diagram trying to cover it up a bit…Can i try to block the bounding box some other way?

One must wait for Hype to implement this kind of function to accept shape based bounding boxes, to be able make this kind of interactions.

1 Like


The following thread on the Forum might prove useful to You.
@DBear’s demo file from this discussion: clickableSVG.zip (16.9 KB)

Note: This solution uses SVGs - not just Hype’s “built-in” features; but after seeing your example I believe it is worth checking out.

Thank you so much for this tip. It almost works now.
My only problem now is that the SVGs can’t get too close to each other. In my graph its necessary that they’re almost touching each other.

In my University we have an “programming expert” we can ask questions and he told me to do this, but i don’t know how to actually do it in hype:
" You need to export the whole picture as an SVG and all the white outlines of the segments must be on the exported SVG. Then you try to address every element individually."

I actually don’t get it :smiley: is there another way? Maybe an easier way??
Than you, you already helped so much!


!Bienensterben Digitale Umsetzung .hype.zip (112.2 KB)