You build a product card. On hover, it should lift a little — transform: scale(1.03) , a transition, done in five minutes. Then the ticket comes in: cards need to be draggable, so you add a pointermove handler that keeps the card glued to the cursor:

card . style . transform = `translate( ${ x } px, ${ y } px)` ;

Enter fullscreen mode

Exit fullscreen mode

You test the drag. It works. You test the hover — on a card you haven't dragged yet — and it works too. Then you drag a card, let go, and move your mouse back over it.

Nothing happens. The lift is just gone. No console error, no warning, and the line that broke it isn't even in your CSS file.

The bug nobody writes on purpose

Here's the part that makes this one sneaky: both rules are completely correct on their own.

.card { transition : transform 150ms ease ; } .card :hover { transform : scale ( 1.03 ); }

Enter fullscreen mode

Exit fullscreen mode

function onDrag ( card , x , y ) { card . style .…