Showing/hiding child component on mouse over

General JUCE discussion
1

Hi,

I’d like to show/hide some child components when the mouse is over the parent component.

The obvious mouseEnter() mouseExit() approach doesn’t work well since mouseExit is called when the mouse gets over a child.

What would be the proper way to do that?

2

If you use addMouseListener, you can tell it to send you all the events that occur in child comps too.

3

I already tried this approach, but maybe I’ve done it wrong:

[code]virtual void mouseEnter(const juce::MouseEvent &e)
{
mpChild->setVisible(true);
}

virtual void mouseExit(const juce::MouseEvent &e)
{
if(e.eventComponent == this)
{
mpChild->setVisible(false);
}
}[/code]

I set the child to visible if we enter either the child or the parent and I set the child to invisble if we leave the parent.
But the in practice when the mouse enter the child we also leave the parent and the child becomes invisible or there is a jitter between visible and invisible states as the mouse is moved…

How would you solve that?

4

here’s a better implementation, but I still get some inconsistent results from time to time.

virtual void mouseEnter(const juce::MouseEvent &e)
{
    triggerAsyncUpdate();
}
  
virtual void mouseExit(const juce::MouseEvent &e)
{
    triggerAsyncUpdate();
}
  
void handleAsyncUpdate()
{
    mpChild->setVisible(isMouseOver(true));
}
5

You could do something like check the co-ordinates of the mouseExit in your parent to see if it actually contains them. Then you only need to set the child to invisible if the mouseExit happens outside the bounds of the child.

6

I’ll try that