Buenas tardes,
he realizado una serie de imágenes que al clickear sobre cada una de ellas aparece una flecha que la marca como seleccionada. Lo he realizado con jQuery:
Código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$('a.options').click(function(){
$('a.options').removeClass("active");
$(this).addClass("active");
return false;
});
</script>
El problema es que en móvil, al pulsar, hace un efecto como de aclarar la imagen una vez que se pulsa. He probado con el css:
Código:
.active{
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: auto;
}
.active:before{
width: 70px;
height: 70px;
position: absolute;
right: 50%;
margin-right: -45px;
top: 50%;
margin-top: -45px;
content: url(img/ico-good.png);
}
El html es:
<ul>
<li class="app-cat">
<a href="#" class="options">
<img src="img/1.jpg" alt="1" />
<p class="name-cat"><span>1</span></p>
</a>
</li>
<li class="app-cat">
<a href="#" class="options">
<img src="img/2.jpg" alt="2" />
<p class="name-cat">2</p>
<!-- <img src="img/ico-good.png" alt="Good" class="good" /> -->
</a>
</li>
<li class="app-cat">
<a href="#" class="options">
<img src="img/3.jpg" alt="3" />
<p class="name-cat">3</p>
</a>
</li>
<li class="app-cat">
<a href="#" class="options">
<img src="img/4.jpg" alt="4" />
<p class="name-cat">4</p>
</a>
</li>
</ul>
Pero me sigue haciendo ese efecto, ¿alguien sabría a qué puede deberse?
Un saludo!!!