Question

I’m working on a site at the moment and have ventured into CSS Sprites for the first time. On the a:active state i’m shifting the background-position as needed which is working great. However if i click the link and move my mouse off the link whilst still mid-click. The effect stays on the button, even after i release the click!

Is there a CSS rule similar to the iPhone action “TouchUpInside” so its only affected if the user releases the click while still in the link area?

Answer 1

Try applying jQuery .mouseout() to those links.

$(".myLinks").mouseout(function() {
  $(this).css('background-position','0 0'); // original position of your sprite
});

Dragging out of the link in mid-click (while the mouse is “down”) is not something CSS is capable of handling. CSS would require an additional pseudo class like “a:unactive” for the same effect to happen.