PickCodeIn Chrome DevTools, select the element, click :hov in the Styles pane and tick :hover to see and copy the hover rules. Computed styles alone never show hover states, so tools that only read computed styles miss them; PickCode reads the page's own :hover and :focus rules.
Why hover styles are hard to copy
When you inspect an element, the browser shows the styles for its current state. The moment you move the mouse to DevTools, the element is no longer hovered, so the hover rule disappears from view. getComputedStyle() has the same problem: it reports the resting state only.
The hover look also often comes from more than one place. A card might change its shadow on :hover, move its arrow icon through a .card:hover .icon rule, and animate both with a transition declared on the resting state.
Force the state in DevTools
- Right-click the element and choose Inspect.
- In the Styles pane, click :hov and tick :hover. You can also right-click the node in the Elements tree and choose Force state.
- The hover rules now appear in the Styles pane. Right-click each one and choose Copy rule.
- Look for
transitionon the non-hover rule. Without it, the copied hover will snap instead of easing. - If a child changes on hover (an icon, an underline), select that child while the parent is forced to :hover and copy its rule too.
For hover effects built with keyframes, open More tools > Animations in DevTools. It records animations as they play and lets you slow them down or replay them, which helps you read timing and easing.
Copy hover states with PickCode
- Pick the element. Press Alt Shift C and hover the button, card or link.
- Hold the selection. Press Shift so the selection stays put while you open the panel.
- Check the Rules tab. It lists the matching rules by specificity, including the :hover and :focus rules the page wrote.
- Copy as Tailwind. The hover and focus declarations come out as hover: and focus: classes next to the resting styles.
Writing it in Tailwind
Tailwind puts the state in front of the class. Each hover declaration becomes a hover: class, and parent-triggered effects use group and group-hover:.
/* CSS from the page */
.card { transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); transform: translateY(-2px); }
.card:hover .arrow { transform: translateX(4px); }
<!-- Tailwind -->
<a class="group block rounded-xl p-6 transition hover:-translate-y-0.5 hover:shadow-lg">
Read more
<svg class="inline size-4 transition group-hover:translate-x-1" viewBox="0 0 16 16" fill="currentColor"><path d="M6 3l5 5-5 5z"/></svg>
</a>Add focus-visible: versions of the same classes so keyboard users get the same feedback.
What may not come across
Hover rules in stylesheets loaded from another domain can't be read by scripts on the page, so a picker can't see them. You can still force the state in DevTools and copy them by hand. Effects driven by JavaScript (mouse-follow glows, tilt cards) are not CSS at all and need the script, not just styles. PickCode does not capture keyframe animations yet.
Questions
Why does DevTools not show my hover styles?
Because the element stops being hovered when your mouse leaves it. Use :hov in the Styles pane or Force state to keep it in the hover state.
Can I copy a hover effect from a site that uses Tailwind?
Yes. The classes are right in the markup, so hover:bg-indigo-500 and similar classes copy as they are, as long as your Tailwind setup has the same colors.
How do I copy a hover animation with keyframes?
Find the animation name in the Styles pane, then search the Sources panel or the stylesheet for its @keyframes block and copy it by hand.
Does PickCode copy focus styles too?
Yes, it reads :focus rules from the page's readable stylesheets along with :hover.