Home/ Questions/Q 8630709
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:06:49+00:00

jQuery mobile and jQuery UI wrap your elements with their own elements. Sometimes those

  • 0

jQuery mobile and jQuery UI wrap your elements with their own elements. Sometimes those wrapper elements have a :hover rule. If, for whatever reason, you don’t want the hover rule to trigger what can you do?

  1. an anti :hover class which keeps the element how you want it during hover
  2. putting a div over top of the element

The problem is the anti-class will fail if you apply theming. You can build the class with getComputedStyles and Javascript but for some reason that only seems to preserve about 90% of the desired style.

The problem with the div over top is that :hover still gets triggered on the underlying div when the mouse touches the corner of the overlying div.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Create a newer more specific :hover selector for the element that undoes any CSS changes. You can read up on specificity, but the fastest way is normally to add an additional ancestor but keeping the rest of the selector.

    For instance if the present selector is something like .jquery-ui-dialog .jquery-ui-button:hover {...} then adding a parent in like body .jquery-ui-dialog .jquery-ui-button:hover {...} will provide more specificity and thus override any conflicting rules.

    • 0