Bonjour à tous,
Je cherche à programmer un "double-tap", idéalement sans Java Script.
Je voudrais que sur mobile, un premier tap fasse apparaître un texte, et que le deuxième tap active le lien associé.
Ci joint mon HTML et CSS en l'état présent :
D'avance merci !
Je cherche à programmer un "double-tap", idéalement sans Java Script.
Je voudrais que sur mobile, un premier tap fasse apparaître un texte, et que le deuxième tap active le lien associé.
Ci joint mon HTML et CSS en l'état présent :
<div class="carte">
<div class="responsive">
<img src="img/carte.jpg" class="carte-monde" alt="carte monde en dessin"/>
<div id="bijagos">
<a href="www.yahoo.fr"><img src="img/icone-bijagos.png" id="icone-bijagos" alt="icone placée sur les Bijagos"/></a>
<p class="texte-bijagos">La géologie des Bijagos</p>
</div>
</div>
</div>
#icone-bijagos{
position: absolute;
left: 41%;
top: 40%;
width:2%; /*la largeur de l'icone dépend de celle de la div "responsive" qui est son conteneur parent.
On la fixe à 4%. De cette manière l'icone devient reponsive*/
}
#icone-bijagos:hover {
width:2.2%;
}
p.texte-bijagos {
position:absolute;
left:43.5%;
top:37%;
opacity:0;
color: #ff9600;
font-weight: bold;
text-shadow: 2px 0 0 white, 0 2px 0 white, 0 -2px 0 white, -2px 0 0 white, 2px 2px 0 white, 2px -2px 0 white, -2px 2px 0 white, -2px -2px 0 white;
}
#bijagos:hover p.texte-bijagos{
transition-property: opacity;
transition-duration: 0.2s;
transition-timing-function:linear;
opacity: 1;
}
D'avance merci !