# Workaround for Showing GroupFocus on Hover **URL:** \ **Category:** Tips\ **Created:** [September 26, 2016, 8:27pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386 "2016-09-26T20:27:10Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\ **Post date:** [September 26, 2016, 8:27pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/1 "2016-09-26T20:27:11Z")
Hello Everyone šŸ™‚ Here is a workaround on how you can show a GroupFocus when a Button (or any element) is hovered. To test this, I created three elements: 1. Hover Button 2. Group Focus 3. Hidden Button (completely transparent, not visible on page load) To show the GroupFocus when the Hover Button is hovered, you can set the conditional formatting on the Hidden Button to be: ā€œWhen Hover Button is hovered or GroupFocusA is hovered --\> This element is visibleā€ Then you need two events in the workflow, with the first being ā€˜Do When Condition is True ā€“ Every Timeā€™ (Hidden Button is visible) --\> Element Actions --\> Show ā€˜GroupFocusAā€™. The second event needed is ā€˜Do When Condition is True ā€“ Every Timeā€™ (Hidden Button isnā€™t visible) --\> Element Actions --\> Hide ā€˜GroupFocusAā€™. You can also use the same idea to Animate other elements when a button is hovered. Be careful with the workflow count though šŸ™‚ Preview: > **[Bubble - Visual Programming](https://forumapp3.bubbleapps.io/version-test/animate_hover?debug_mode=true9)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. Editor: > **[Bubble Editor - Forumapp3](https://bubble.io/page?type=page&name=animate_hover&id=forumapp3&tab=tabs-13)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. ---
**Author:** ![pnodseth](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/pnodseth/32/2611_2.png) [@pnodseth](https://forum.bubble.io/u/pnodseth)\ **Post date:** [October 21, 2016, 9:48pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/2 "2016-10-21T21:48:49Z")
Great, thanks for posting this! ---
**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\ **Post date:** [October 21, 2016, 10:21pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/3 "2016-10-21T22:21:08Z")
No problem at all! šŸ˜Š ---
**Author:** ![geo.chiv.george](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/geo.chiv.george/32/208433_2.png) [@geo.chiv.george](https://forum.bubble.io/u/geo.chiv.george)\ **Post date:** [November 9, 2016, 3:07am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/4 "2016-11-09T03:07:10Z")
Hey I am just wondering. What is the purpose of this? Why canā€™t we set a condition on a group which is when the button is hovered AND this gorup is hovered -\> this group is visible. ---
**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\ **Post date:** [November 9, 2016, 3:13am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/5 "2016-11-09T03:13:23Z")
Itā€™s because the conditional formatting for GroupFocus elements doesnā€™t include the ā€˜this element is visibleā€™ option, so the workaround is show/hide the GroupFocus through the workflow every time the hidden button becomes visible (which is when the hover button is hovered, in this example). ![](https://us1.discourse-cdn.com/bubble/original/2X/8/83f69e93fa390ad2c32bb5c3c7668b90add68115.jpg) ---
**Author:** ![geo.chiv.george](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/geo.chiv.george/32/208433_2.png) [@geo.chiv.george](https://forum.bubble.io/u/geo.chiv.george)\ **Post date:** [November 9, 2016, 3:15am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/6 "2016-11-09T03:15:51Z")
But why use a groupfocus for this purpose? a standard group would be good no? ---
**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\ **Post date:** [November 9, 2016, 3:21am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/7 "2016-11-09T03:21:56Z")
A Group could work but if you have a reusable element thatā€™s a header, the header will need to expand the length of the Header+Group to include the Group (which would mean really large headers). Instead, each GroupFocus is always attached to its ā€œreference elementā€ and you donā€™t need to enlarge the header to fit the GroupFocus. Header sizing with a GroupFocus element: ![](https://us1.discourse-cdn.com/bubble/original/2X/1/1b25e139643e1cff8284013863235e89a6dc24cb.png) Header sizing with a Group element: ![](https://us1.discourse-cdn.com/bubble/original/2X/d/df91663f47e678c3bb53453df7653f8c05dc39e1.png) ---
**Author:** ![raymond](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raymond](https://forum.bubble.io/u/raymond)\ **Post date:** [November 9, 2016, 1:30pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/8 "2016-11-09T13:30:07Z")
And it does not influence the responsive layout. Raymond | [appSimplicity](http://appsimplicity.com) ---
**Author:** ![geo.chiv.george](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/geo.chiv.george/32/208433_2.png) [@geo.chiv.george](https://forum.bubble.io/u/geo.chiv.george)\ **Post date:** [November 11, 2016, 12:43am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/9 "2016-11-11T00:43:11Z")
I have to say I have not experienced that. I made this site [faketubes.com](http://faketubes.com) and in that I made the upload button show a group on hover. The upload is attached to the header which is a reusable element and the group doesnā€™t seem to make the header any bigger. Iā€™ll do some playing around and try and understand the use case for this. ---
**Author:** ![aoshinn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/aoshinn/32/9341_2.png) [@aoshinn](https://forum.bubble.io/u/aoshinn)\ **Post date:** [March 24, 2017, 5:26pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/10 "2017-03-24T17:26:11Z")
Thank you SO much for this hint. I was seriously beating my head on this one. It works like a charm. ---
**Author:** ![nomads32n](https://avatars.discourse-cdn.com/v4/letter/n/ea666f/32.png) [@nomads32n](https://forum.bubble.io/u/nomads32n)\ **Post date:** [September 24, 2018, 4:50pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/11 "2018-09-24T16:50:27Z")
How do you make this work for repeating groups? ---
**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\ **Post date:** [September 26, 2018, 2:10am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/12 "2018-09-26T02:10:33Z")
Hi @nomads32n šŸ™‚ You can set this up by using a reusable element which contains the more icon and the groupfocus element. Then place the reusable element inside your repeating group. > [@Overflow menu within RG](http://forum.bubble.io/t/overflow-menu-within-rg/25301/5): > > No problem! slight_smile Here is an example setup incase anyone needs it: Editor: Preview: Within the reusable element, instead of clicking the icon to show the groupfocus element, you can use the hidden element workaround from this thread to show the groupfocus, when the icon is hovered. That should work! šŸ™‚ ---
**Author:** ![cheol.rim](https://avatars.discourse-cdn.com/v4/letter/c/ac8455/32.png) [@cheol.rim](https://forum.bubble.io/u/cheol.rim)\ **Post date:** [October 11, 2020, 8:16am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/13 "2020-10-11T08:16:30Z")
This is a great workaround for this ā€˜this element is visibleā€™ not being available in GroupFocus conditions. Just one question: where did you place the hidden button? I guess it doesnā€™t matter too much, but did you make it tiny and place it somewhere in a corner? Above the hover button? Just looking for best practice. Thanks. ---
**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\ **Post date:** [October 11, 2020, 7:09pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/14 "2020-10-11T19:09:09Z")
Hi @cheol.rim šŸ™‚ There is actually an easier way to do this now, which doesnā€™t involve any hidden elements. Here is the step-by-step post on how to set this up: [Hover to Reveal Shape + Do when shape is not visible = Not Working](http://forum.bubble.io/t/hover-to-reveal-shape-do-when-shape-is-not-visible-not-working/83739/4) ---
**Author:** ![cheol.rim](https://avatars.discourse-cdn.com/v4/letter/c/ac8455/32.png) [@cheol.rim](https://forum.bubble.io/u/cheol.rim)\ **Post date:** [October 12, 2020, 1:43am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/15 "2020-10-12T01:43:24Z")
That is so brilliant and weird. Amazing that it works. But, like the previous solution, the process has to be repeated and applied to the focus group as well, right? Otherwise, hovering over the button reveals the group, but the group once the mouse is moved over to the group. Or maybe I missed something. ---
**Author:** ![cheol.rim](https://avatars.discourse-cdn.com/v4/letter/c/ac8455/32.png) [@cheol.rim](https://forum.bubble.io/u/cheol.rim)\ **Post date:** [October 12, 2020, 1:46am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/16 "2020-10-12T01:46:01Z")
Also, when doing that, is there a difference between selecting ā€˜This GroupFocusā€™ vs the specific name of the element? ---
**Author:** ![cheol.rim](https://avatars.discourse-cdn.com/v4/letter/c/ac8455/32.png) [@cheol.rim](https://forum.bubble.io/u/cheol.rim)\ **Post date:** [October 12, 2020, 2:17am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/17 "2020-10-12T02:17:51Z")
This seems to work nicely: ![image](https://us1.discourse-cdn.com/bubble/original/3X/f/3/f3890a592feacafa0acb85b3fc008f3d1cfd5b27.png) 1. When either the button or the groupfocus element are hovered, the groupfocus is visible 2. When both the button AND the groupfocus element are not hovered, the groupfocus is hidden ---
**Author:** ![wsu.app18](https://avatars.discourse-cdn.com/v4/letter/w/8baadc/32.png) [@wsu.app18](https://forum.bubble.io/u/wsu.app18)\ **Post date:** [March 24, 2021, 12:20pm UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/18 "2021-03-24T12:20:41Z")
Hi, I have gone through the entire thread and I have set the workflow as per the @fayewatson suggested. In the header, I have created a Text element (case studies) and when the user clicks on it, it will display the Submenu (Group focus1), and when the user hovers on the Previous Case studies it will display another submenu (Group Focus2). But the issue is when the user goes from one Submenu (Group Focus 1) to another Submenu (Group focus 2), Group Focus 2 gets hide or you can say when the mouse moves from Group focus1 to Group focus 2, Group focus 2 hides. I have made a short video on this ![Group focus gets hide when mouse moves](https://us1.discourse-cdn.com/bubble/original/3X/e/d/ed2914e7699782fac8e1c28bdfa744abaf3fe5a9.webp) Please let me know if I am missing any step. Thanks ---
**Author:** ![wsu.app18](https://avatars.discourse-cdn.com/v4/letter/w/8baadc/32.png) [@wsu.app18](https://forum.bubble.io/u/wsu.app18)\ **Post date:** [March 30, 2021, 7:31am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/19 "2021-03-30T07:31:40Z")
Hi, Does any one got any solution for this one. Thanks ---
**Author:** ![SerPounce](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/serpounce/32/62068_2.png) [@SerPounce](https://forum.bubble.io/u/SerPounce)\ **Post date:** [March 30, 2021, 9:24am UTC](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386/20 "2021-03-30T09:24:00Z")
Try this: Change GroupFocus2 to a group within GroupFocus1 that is hidden. Call it something like ā€œGroup Submenuā€. Create a Custom State within GroupFocus1 called something like ā€œwhichMenuā€. Show Group SubMenu when any of the menu items are hovered and set whichMenu to the appropriate state based on the menu item that is hovered. Then within Group Submenu add 4 different groups, 1 for each sub menu, all hidden. Add a condition to each to show if whichMenu is this groupā€™s value (1 - 4). This will almost certainly work. The only downside is that you lose the relative positioning of the Group Focus 2, but that is a small price to pay to get this working flawlessly. [Next page](https://forum.bubble.io/t/workaround-for-showing-groupfocus-on-hover/6386.md?page=2)