How to clear touch screen "touched" button focus, active, hover

Question

Trying to figure out how to reset a button back to the "untouched" state. I am using a button as:

    <div id="service-control-buttons" data-role="controlgroup" data-type="horizontal">
        <a href="#" id="service-previous" data-role="button" data-icon="arrow-l">Prev</a>
        <a href="#" id="service-next" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
    </div>

Answer 1

To prevent this, you can customize the hover effects for touch screens using the following @media in you CSS file.

@media (hover: none) and (pointer: coarse) {
   /* Add hover styles here */
}