iphone / css - how do I prevent black semi-transparent overlay on items when clicked

Question

I am programming a mobile site and in iphone there is a noticeable semi-transparent black overlay on top of the image when you touch / hold on an clickable item. Has anyone experienced this? How do I get rid of that? Is there a way with css? This is my code:

childLink = $('<div class="option"/>');
childLink.click(function () {
    $(this).find('.option_image').addClass('active');
    hideScene($(this).attr('data-sceneID'),'standard');
});

Answer 1

You can set the color of the tap highlighting with the CSS Property -webkit-tap-highlight-color:

To disable highlighting use a color with alpha = 0.

.yourLinkClass {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

More info here: http://css-infos.net/property/-webkit-tap-highlight-color