iPhone css hover should go back normal 'unhover'

Question

I'm working on a web app for the iPhone…

I made a 'button' with the following CSS, when you tap it (:hover) it changes, but when you release, it should go back to normal mode… How do i do that ?

.button {
height:40px;
width:95px;
margin-top:10px;
float:left;
overflow:hidden;
margin-left:14px;
background-image: -webkit-linear-gradient(bottom, #558544 0%, #5EA83D 100%);
border-radius: 12px;
border-style:solid;
border-color:#558544;
border-width:5px; }

.button:hover {
    background-image: -webkit-linear-gradient(bottom, #5EA83D 0%, #558544 100%);
}

Answer 1

Hover in CSS doesn't work like that. Instead you will have to use touch specific javascript (ontouchstart and ontouchend) and add some class to the button that represents the "down" state.

For example HTML like this

<div class="button" ontouchstart="buttonTouchStart(event)" ontouchend="buttonTouchEnd(event)" ></div>

and javascript like this

var buttonTouchStart = function(e) {
    var t = e.target;
    t.className = "button down";
}

var buttonTouchEnd = function(e) {
    var t = e.target;
    t.className = "button";
}

You should probably also use media queries to disable the hover CSS for the devices that are targeted by the Javascript.