¿Cómo cambio el color de un elemento HTML cuando el usuario accede a él?

Mi problema es tan simple que no puedo creer que no exista una solución basada en HTML / CSS para iOS 4 y versiones posteriores.

Tengo una grilla de imágenes, cada subtítulo con una sola línea de text gris. El text está limitado por líneas en la parte superior y en la parte inferior.

Cuando el usuario pulsa el elemento (la image o los subtítulos), el text y las líneas deben cambiar el color a blanco y restablecer el color, cuando levanta el dedo nuevamente. Incluso estaría mejor, si una línea adicional apareciera en la parte superior de la image. Todo el elemento está encapsulado en un div .

Ya intenté usar las properties CSS -webkit-tap-highlight-color , -webkit-active-link y :hover -webkit-active-link :active en el div o varios subelementos, sin ningún éxito hasta el momento.

Como sugerí, probé este documento

 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="highlight.css" /> <style type="text/css"></style> <script type="text/javascript"> div = document.getElementById('element'); div.ontouchstart = function(){this.style.backgroundColor = '#fff';} // on tapping div.ontouchend = function(){this.style.backgroundColor = '#000';} // on releasing </script> <title></title> </head> <body> <div id="element"> <p>Dies ist noch ein Test.</p> <p>Wenn man auf <a href="#">diesen etwas laengeren Link </a> tappt, sollte was passieren.</p> </div> </body> </html> 

con esta hoja de estilo

 #element { width:200px; height:200px; border:solid; border-color:blue; -webkit-user-select:none; } 

Pero esto también parece no funcionar.

 div = document.getElementById('#DIV'); div.onmousedown = function(){this.style.backgroundColor = ###;} // on tapping div.onmouseup = function(){this.style.backgroundColor = ###;} // on releasing 

Como no estás en JS, aquí está el guión completo para ti:

 <script> div = document.getElementById('elem'); div.onmousedown = function(){this.style.backgroundColor = '#f00';} // on tapping div.onmouseup = function(){this.style.backgroundColor = '#000';} // on releasing </script> 

Póngalo después de la label de su elemento.

Aquí hay algo aún mejor:

 <script> function changeClr( id , clr ){ document.getElementById( id ).backgroundColor = clr; } </script> 

Coloque el código anterior en el elemento <head> . Todo lo que queda por hacer es agregar a este elemento estos atts:

 onmousedown='changeClr( "id" , "#f00" );' onmouseup='changeClr( "id" , "#000" );' 

ej. <div id='element' onmousedown='changeClr( "element" , "#f00" );' onmouseup='changeClr( "element" , "#000" );'></div> <div id='element' onmousedown='changeClr( "element" , "#f00" );' onmouseup='changeClr( "element" , "#000" );'></div>

Ese código le permite cambiar el color de cualquier elemento mediante la adición de estos atts.

El -webkit-tap-highlight-color es justo lo que sucede cuando un usuario toca algo, no es un estado de "encendido / apagado". Debe usar Javascript como lo indica Michael para efectuar los cambios.