fancybox-3

Problem: Clicking close button leaves the underneath mobile menu button in its hover state


In mobile view (iOS), the close button of fancybox is exactly at the same position as the menu button (slide down menu) underneath fancybox. So, when I click the fancybox close button, fancybox closes but after that, the menu button is in its hover state (with the unwanted background-color of the hover state). Why is the menu button influenced by a click on the close button of fancybox. Fancybox is above the html code...it seems that clicking the fancybox close button mixes up with the menu button. (Its only in iOS of course and I know the removing hover state problem in iOS. So I guess this has something to do with "touch"?)

I hope I described my problem well enough ;-) Thx!


Solution

  • It is not clear from your description if your menu button is trigger elment (e.g., clicking that button starts fancybox). If so, then most likely your button gets focus by default after closing fancybox. You can disable that feature by using backFocus option.

    However, if your button is not trigger element, then possible workarounds:

    1) Move close button to other side; 2) Use @media (hover: hover) {} to avoid setting hover state on mobile devices (see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover#Example)