CSS trick makes hover effects appear permanent without JavaScript
A pure CSS technique can simulate a 'sticky' hover effect by setting an infinite transition-duration on an element's base state while keeping a normal duration on the :hover or :focus state. Using calc(infinity * 1s) as the transition-duration in the default state means the style effectively never reverts once triggered. When a user hovers over the element, the style changes quickly as usual, but the return transition takes infinitely long, so the new style persists visually. The trick works well for demos, prototypes, and lightweight microinteractions where no real application state needs to be stored. For genuinely persistent states — such as selections surviving clicks or keyboard navigation — developers are advised to use :checked, :target, or JavaScript instead.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in