How to Apply Hover Effects in Elementor Only on Devices with a Cursor

Why Hover Can Stick on a Smartphone

On a computer, the cursor constantly moves across the page, so the browser clearly understands when an element is in the :hover state and when the cursor has left it. On a phone or tablet, a touch is not a complete equivalent of hovering with a cursor. For compatibility with mouse-oriented websites, the browser may emulate hover.

If :hover controls transform, box-shadow, color changes, opacity, or the display of additional content, a user may see an unwanted state after tapping. This is especially noticeable on cards, menus, buttons, and blocks with overlaid text.

Hover itself is not an error. The problem is that the effect is applied to devices that do not support conventional cursor hovering. It is therefore better to limit it with conditions that describe the device's capabilities.

• hover: hover — the device supports hovering that can be used like a conventional hover state.
• pointer: fine — the primary pointer is sufficiently precise, as with a mouse or stylus.

How to Add a Hover Condition in Elementor Custom CSS

Open the settings for the required element in Elementor and add CSS to the Custom CSS field, if this option is available in your configuration. Within Elementor, the service selector selector is used for the current element. It is automatically replaced with the specific class or ID of the block.

The default state should be described separately, while hover styles should be placed inside the media query. As a result, the element keeps its regular, untransformed state on mobile devices, while the effect works on a desktop with a mouse.

• Select the exact container, widget, or button to which the effect should apply.
• Keep transform: none and the initial shadow in the default state.
• Add transition to the base selector so the animation runs smoothly.
• Place selector:hover only inside @media (hover: hover) and (pointer: fine).

selector {
  transform: none;
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  selector:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
  }
}

How to Add an Accessible Keyboard State

Limiting hover for touch devices does not mean you should forget keyboard users. A person may navigate through the page with the Tab key, so interactive elements must have a noticeable focus state.

Use :focus-visible for this purpose. Unlike simple :focus, this pseudo-class lets you display a visual indicator specifically in situations where it is needed during keyboard navigation. For buttons and links, an outline or another clearly visible highlight is usually sufficient.

If a card is a link or a button, its focus state can be styled separately from hover. Do not rely only on a change in shadow or color: the indicator must have sufficient contrast and remain clearly visible against the background.

• Apply :focus-visible to links, buttons, and other elements that can be activated.
• Do not remove the default outline without providing a complete replacement.
• A focus state is not needed for a regular decorative container if it is not involved in interaction.

selector:focus-visible {
  outline: 3px solid #1d70f7;
  outline-offset: 3px;
}

Option for a Card with an Interactive Link

If the entire card is a link, check which Elementor element receives the CSS. When styles are assigned to the container while the link is inside it, hover may not work as expected. In this case, attach the effect to the actual interactive element or to the container that truly receives the link.

Do not hide important information using hover alone. On a smartphone, this state may be unavailable or inconvenient. The main heading, description, price, and button should remain visible, while hover should be used as an additional visual effect.

• The card should have clear link text or an understandable action name.
• All important actions must be available without hovering.
• Check that transform does not overlap neighboring cards or the button.
• If the card grows, leave enough space between elements.

selector {
  transform: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  selector:hover,
  selector:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
  }
}

selector:focus-visible {
  outline: 3px solid #1d70f7;
  outline-offset: 3px;
}

Common Configuration Mistakes

The problem most often occurs because the CSS is placed incorrectly or the condition is too broad. For example, selector:hover added without a media query will also be available on touch devices. Checking only pointer: fine does not guarantee that the device actually supports hover in the required form.

Another mistake is adding transition only inside the media query. This does not always create a visible problem on mobile, but the default state becomes less predictable, and the return to the initial properties may happen abruptly.

Do not use :active as a replacement for hover without checking the interaction scenario. :active describes the moment of pressing or activating an element, not hovering. It may be appropriate for mobile buttons in some cases, but it does not replace the behavior of a persistent hover state.

• Do not insert selector into the global CSS of the theme or plugin: it is Elementor-specific syntax.
• If the CSS is added to the theme file, replace selector with a real class, such as .card.
• Do not make important content available only after hovering.
• Do not apply complex hover animations to every element on the page without a clear need.
• After making changes, clear the site, CDN, and browser caches if the old styles continue to appear.

How to Check the Result on Different Devices

Testing only in the Elementor editor or in a browser's emulation mode is not always enough. Emulation changes the viewport size, but it does not always fully reproduce touch-input behavior. Therefore, after configuring the effect, it is best to test the page on a real smartphone or tablet.

Move the cursor over the element on a computer, move it away, and make sure the state returns to its initial appearance. Then open the page on a smartphone, tap the card or button, and check that it does not remain raised or highlighted.

Also navigate through the page with the Tab key. The focus must be visible, the navigation order logical, and all links and buttons accessible without a mouse.

• Desktop: hover, move the cursor away, and hover again.
• Smartphone: first tap, second tap, and page scrolling.
• Tablet or hybrid device: test both touch input and mouse input.
• Keyboard: Tab navigation, activation with Enter or Space, and a visible focus-visible state.
• Different browsers: check whether state behavior changes after refreshing the page.