I have a fixed div at the top of the home page which acts as a roll over trigger when users move their mouse over (trying to present CTA before user leaves site). The interaction initially works as intended, however, if triggered again (no action) the navigation links or site links cannot be clicked.
To reproduce:
Go to site (desktop) and roll mouse over the top 10 px of site
CTA Modal Opens
Close modal
Hover over navigation link / dropdown - opens as expected
Roll mouse over 10 px of site again
Issue: Links / Nav dropdown no longer working
Before you hide the modal you’re setting the opacity to zero, but when you trigger it all your doing is changing the display property. When you hover over the trigger a second time it’s setting display: flex with opacity: 0 and preventing any interaction on the elements below it.
To allow it to trigger each time, just change the initial interaction to also set the opacity to 100 (and the duration to zero to prevent the fade animation):
Personally I’d recommend just hiding the Rollover Trigger element after closing the modal the first time so users don’t continue seeing the incentive—in which case you can omit the change to the Open Modal interaction.
Mike! Thank you for explaining the issue. That all makes sense now. Agreed, was only looking to have the CTA modal open once for the user, so I’ve added the Rollover Trigger to hide on the Close Modal interaction. Thank you again!