Dans Webkit sur iPhone/iPad/iPod, le fait de spécifier le style d'une pseudo-classe :active pour un fichier de type <a> ne se déclenche pas lorsque vous tapez sur l'élément. Comment faire pour qu'elle se déclenche ? Exemple de code :
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>
Une solution consiste à s'appuyer sur :target au lieu de :active :
<style>
a:target {
background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>Le style sera déclenché lorsque l'ancre sera ciblée par l'url courante, ce qui est robuste même sur mobile. L'inconvénient est que vous avez besoin d'un autre lien pour effacer l'ancre dans l'url. Exemple complet :
a:target {
background-color: red;
}
<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>
Pas de lien à 100% avec cette question, mais vous pouvez également utiliser le hack css sibling pour y parvenir.
HTML
<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>SCSS
input {
&:checked + label {
background-color: red;
}
}Si vous souhaitez utiliser des infobulles purement html/css.
span {
display: none;
}
input {
&:checked ~ span {
display: block;
}
}
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
