Changing 'Active' state of button when mouse remains over the button

Greetings,

I have a unique situation where I am writing a web interface for a piece of hardware that is accessed through a touchscreen computer without mouse or keyboard. The problem comes in when a button is touched. The cursor remains in that position after the finger is removed, making it appear that the button is still being pushed, and this is quite confusing. The numeric keypad that I created is an example, as the last number touch remains highlighted. The normal and active states of the buttons are defined by CSS. Does someone out there have any ideas on how to change the state of the button on mouseup, or perhaps move the cursor to a neutral location? Any ideas are much appreciated.

Thanks in advance,
-ExDes-

 

I'm not sure I understand the problem here. The active pseudoclass is only, um, active when the mouse button is pressed, so it should turn off when you remove your finger from the screen. (Surely?) The same is true for onMouseDown, onMouseUp, etc.

If you're using hover instead for a nice glowy effect then that could cause issues. You could try something like this, which you can use to 'cancel' the hover pseudoclass until the mouse pointer moves outside of the pressed button. (You should hopefully be able to adapt this if the events are working differently on a touchscreen / I've just misunderstood.) When the code detects a mouseup on a span, it assigns the class Clicked to it until the mouse moves out of the span, so the span is reset for the next press.

		$(document).ready(function () {
			$("span").click(function () { $(this).addClass("Clicked"); });
			$("span").mouseout(function () { $("span").removeClass("Clicked"); });
		});

Code (markup):

I've used jQuery, but obviously you could rewrite it without.

Is that useful? Have I just misunderstood...?