Data-tip + a href="callto" sur une image
Bonjour,
Je voudrais que sur une image (en background dans le css), on puisse alternativement cliquer (si l'on accéde dpuis un téléphone mobile par exemple) pour appler direct, et que sur un desktop l'on puisse juste avoir une infobulle affichant le nro en question. J'ai pu jusqu'ici coder ce dernier mais je n'arrive pas à appliquer la première règle (appel direct). Devrais je créer deux documents css ou y a t-il moyen de le faire avec une seule feuille d style et que le media query en décide ?
Voici mon code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <span data-tip="#" class="telephone">mon_nro</span>
.telephone {
background-image: url('images/phone.png');
background-size:contain;
background-repeat: no-repeat;
background-color: #D2D2D2;
width:100px;
height:100px;
font-size: 0;
border:2px solid #D2D2D2;
border-radius: 50px;
}
.telephone:hover,
.telephone:focus,
.telephone:active {
background:url('images/phone.png') no-repeat;
background-size:contain;
background-color: #F900C7;
width:100px;
height:100px;
font-size: 0;
border:2px solid #F900C7;
border-radius: 50px;
} |
Merci par avance
