Hover and Click Selectors

Some parts of your site only appear after a user interaction. Dropdown menus appear on hover. Modals open on click. Accordion sections expand. These elements are invisible in a normal screenshot because they require action to reveal them.

Hover and click selectors tell Sitepager which elements to interact with before capturing a screenshot. Sitepager hovers or clicks the element, waits for the result to appear, and takes a screenshot of the activated state.

Where to find it

Open your scan settings and go to Advanced Settings > Dynamic Content & Interactions. Enable the section toggle in the top right corner.

Under Interactions, you will find two options:

• Enable hover interactions reveals the Hover items field
• Enable click interactions reveals the Click items field

Enable the one you need and add your CSS selectors. Enter multiple selectors separated by commas or press Enter after each one.

How hover selectors work

When you add a hover selector, Sitepager:

1. Finds every element on the page that matches the selector
2. Moves the mouse over the element
3. Waits for hover effects to appear
4. Takes a screenshot of the page with the hover state visible
5. Moves the mouse away to reset the state

Each hover creates a separate interaction screenshot. This screenshot is compared against the same interaction in your baseline, just like a regular page screenshot.

Common uses:

• Navigation dropdowns that appear on hover
• Tooltips that show on hover
• Image overlays that reveal on hover
• Mega menus

How click selectors work

When you add a click selector, Sitepager:

1. Finds every element on the page that matches the selector
2. Clicks the element
3. Waits for the result to appear
4. Takes a screenshot of the page with the clicked state visible
5. If the click caused navigation, Sitepager goes back to the original page
6. If the click opened a modal or overlay, Sitepager dismisses it

Each click creates a separate interaction screenshot.

Common uses:

• Modals triggered by a button click
• Accordion sections that expand on click
• FAQ sections that reveal answers on click
• Sign-up or contact form modals

When to use hover vs click

Use hover selectors when the element reveals content on mouse-over. Menus, tooltips, image overlays.

Use click selectors when the element requires a click to show content. Modals, accordions, expandable sections, FAQ toggles.

If you are not sure, check in your browser. Hover over the element. If content appears, use a hover selector. If you need to click, use a click selector.

How to find your selector

The visual method (recommended) Open your browser’s developer tools, right-click the element you want to interact with, and select Inspect. In the Elements panel, right-click the highlighted element and choose Hide element. The element disappears temporarily, confirming exactly what will be affected. Look at the class or ID on that element and use it as your selector.

The console method Open your browser’s developer tools console and run document.querySelectorAll('.your-selector') to confirm the selector matches the right elements before adding it to Sitepager.

CSS selector reference

CSS selectors follow a standard format. The class and ID names will be specific to your site, but the syntax is always the same:

Selector	What it targets
.nav-item.has-submenu	Navigation items with submenus (hover)
.dropdown-trigger	Elements that trigger dropdowns (hover)
#open-faq	A button that opens an FAQ section (click)
.accordion-toggle	Accordion headers that expand content (click)
.modal-trigger	Buttons that open modals (click)
[data-tooltip]	Elements with tooltip attributes (hover)

Scoping interactions to specific pages

You do not need to add every interactive element on every page. For page-specific interactions, add the selector once and Sitepager captures it on every page where that element exists. For shared components like navigation or footers, use a dedicated interactions scan to avoid duplicate screenshots across your full site.

Tips

Start with your most important interactions. Navigation menus, sign-up modals, and contact forms are usually the highest priority.

Each interaction adds one extra screenshot per matched page. Two hover selectors and one click selector means three extra screenshots per page where those elements exist. Keep this in mind when planning your scan scope.

Test on one page first. Add your selectors and run a scan on a single page to confirm the interactions are captured correctly before running a full site scan.

Use specific selectors. A selector like button will click every button on the page. Target the specific element you want to interact with.

For shared components like navbars or footers, create a dedicated interactions scan. If you add a selector for a navigation hover or footer modal to a full site scan, Sitepager captures that interaction on every page it scans, creating duplicate screenshots across your entire site. Instead, create a separate scan scoped to one or two representative pages and add your interaction selectors there. Setting Up Your Scans

Capturing the same interaction across many pages? Use a generic class. Add a shared class to all the elements you want to interact with in your site’s code. Then use that one class as your selector in Sitepager instead of adding a different selector for each element.

For example, if you have CTA buttons that open a modal on multiple pages, add a class like sp-cta to all of them. Use .sp-cta as your click selector and Sitepager will click it on every page it appears and capture a screenshot of the result. Testing with Generic Classes

Hover and click selectors work alongside dynamic content selectors. Use dynamic content selectors to remove elements that cause false positives. Use hover and click selectors to capture interactive states. Both are configured in the same section. Dynamic Content Selectors