[Html5/CSS]Pop-up verdwijnt niet op ios browser

[Silvos]

Beste Tweakers,

Ik ben bezig met het maken van een website, in het kader daarvan wil ik graag pop-up afbeeldingen gebruiken, hoe dit nu werkt is;
- Op de computer verschijnt/verdwijnt de afbeelding als je over een button hovered met de muis.
- Op mijn android telefoon verschijnt de afbeelding als je op de button klikt en verdwijnt de afbeelding als je naast de afbeelding klikt. (het zijn kleine afbeeldingen).
- Ik heb echter van verschillende mensen begrepen dat de afbeelding op hun apple telefoon niet verdwijnt wanneer ze ernaast klikken (ik neem aan met stock browser safari). Omdat ik zelf geen apple-device heb zijn mijn mogelijkheden om dit in de praktijk te testen echter beperkt.

Ik gebruik de volgende codes;
HTML

code:

<span><img src="thumbs/ 110.png" /><br>Afbeelding omschrijving</span>

CSS

code:

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ 
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ 
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ 
visibility: visible;
top: 0;
left: 60px;

Weet iemand wellicht een oplossing voor dit probleem? Alvast hartelijk dank voor de reacties.

[gamer13]

':hover' op touch-devices is sowieso een slecht idee. Even snel zoeken op Google levert je ook genoeg resultaten op met ditzelfde probleem. Je zou eens kunnen kijken naar de guide hier: http://www.prowebdesign.r...-on-touch-screen-devices/