Safari Web Extensions can sometimes exhibit unexpected behavior when it comes to handling the :hover CSS pseudo-class. This is often due to the restrictions and security measures imposed on browser extensions.

One common issue with Safari Web Extensions and the :hover pseudo-class is that the :hover styles may not be applied as expected or may not work at all. This is because extensions are sandboxed and may not have direct access to the user's mouse movements or hover events on web pages.

To work around this limitation, you can consider using JavaScript to add and remove classes for the hover effect instead of relying solely on the :hover pseudo-class.

Here's an example of how you can achieve the hover effect using JavaScript in a Safari Web Extension:

  1. HTML: Add a class to the element that you want to apply the hover effect:

    html
    <div class="hover-effect">Content goes here</div>
  2. CSS: Create CSS styles for the hover effect class, but don't use the :hover pseudo-class:

    css
    .hover-effect { /* Regular styles */ } .hover-effect.hovered { /* Styles for the hover effect */ }
  3. JavaScript: In your Safari Web Extension JavaScript code, use event listeners to add and remove the hovered class:

    javascript
    // Content script or injected script in your Safari Web Extension const hoverElements = document.querySelectorAll('.hover-effect'); hoverElements.forEach((element) => { element.addEventListener('mouseenter', () => { element.classList.add('hovered'); }); element.addEventListener('mouseleave', () => { element.classList.remove('hovered'); }); });

By using this approach, you're manually adding and removing the hovered class on mouse enter and mouse leave events, which should mimic the hover effect without relying on the :hover pseudo-class directly.

Keep in mind that Safari Web Extensions have their limitations due to the browser's security model, and certain CSS features may not work as expected within the extension's sandboxed environment. Always test your extension thoroughly across different browsers to ensure consistent behavior.

Have questions or queries?
Get in Touch