CSS/HTML: mouse down on cancel

Question

I have a link being themed using CSS. I have up, over and down CSS properties applied which all work.

Problem is, when you hold down the mouse over a button, drag away then cancel by letting go, the down state is still being applied until you click again on some white-space.

You can see what I mean by doing the above on buttons 1, 2 and 4 here: http://jsfiddle.net/2vjbz/

How do you 'refresh' by not having to click again?

Answer 1

According to your CSS, I think this behavior is correct, but the problem is that mouse up event is not getting triggered and link element remains in active state. You can fix it using jQuery by invoking mouse up event for link element.

One method is to invoke it when mouse moves in pager div

$('#pager').bind("mousemove", function(event) {
    $('#pager a').mouseup();
});

You might need to add conditions to make it perfect

EDIT:

You can experiment with it. This is one more method

http://jsfiddle.net/diode/2vjbz/18/

Here it cancels the drag event. Both of these worked for me.