hi people 

Le hover ne fonctionne pas avec ce code, je ne vois pas pourquoi !

html:

<div class="div">
<p id="p_id">paragraphe</p>
<span class="tooltip">texte du tooltip</span>
</div>

css 

#p_id{
background-color:orange;
}
#p_id:hover{
background-color:blue;
}

j'ai bien le background orange, mais pas le blue lors du hover

-
Edité par born1 18 septembre 2019 à 12:32:20

Bonjour, et si tu fermais les guillemets pour la valeur de l'attribut class ligne 1 de ton HTML. 

Erreur que tu aurais pu voir avec un éditeur à coloration syntaxique ou avec le validateur  https://validator.w3.org/#validate_by_input

j'ai corrigé l'erreur du post, mais je n'ai pas cette erreur dans mon code, je n'ai pas fait du copier coller, 

j'ai repris le code dans js fiddle et il fonctionne 

donc dans mon footer j'ai ceci

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>

il y a quelque chose qui vous semble en contradiction

dans la balise head le code css est appelé en dernier

svp le css c'est vraiment ma bête noire si je peux dire ça , et là je ne vois vraiment pas pourquoi ! 

bonjour,

il doit y avoir quelque chose dans la CSS, utilise l'inspecteur web de ton navigateur pour quoi les propriétés utilisées, tu peux également procéder par étapes, en ne gardant que la partie de la css concernée, et ajouter les autres lignes au fur et à mesure

le plus simple : donne le code de la page en ligne quelque part 

J'ai copié collé ton code et il fonctionne chez moi.
Je pense que tu as d'autres CSS qui contredisent ces lignes.

Attention ! Les priorités en CSS sont subtiles : c'est la règle la plus précise qui est prioritaire, quelque soit son ordre d'apparition.
Par exemple une règle avec sur l'id (#) est plus précise qu'une sur une classe (.) .

Ou alors tu utilises simplement un vieux navigateur. A une époque le :hover ne fonctionnait que sur les liens et les input.

--
Alain

merci je vais explorer cette piste

pour plus de précision eseile : .div #p_id:hover{

backgoun:color:red !important;

}

le hover s'affiche quand meme sur mobile est remplace l'effet d'un :active;

tu peut voir le résultat de ton :hover en cliquant sur ton boutton.

(à condition de ne pas avoir attribuer d'autres effets en :active;)

ok surper , donc pas besoin de mettre la même action avec :active ? 

puisque c'est ce que j'ai fait

:active est l'effet de style qui apparais au clique du client. (la durée d'apparition du style dépend de la durée de temps que l'élément et presser ou cliquer.)

:hover effet qui s'applique au survole.(sur pc= survole souris / sur mobile = click)

le :hover sur mobile réagis comme un :active ou presque (permanent, si tu ne clique pas à coter pour le désélectionner ton :hover reste actif sur mobile).

Si tu attribut un :active à l'un de tes éléments alors sur mobile le :active seras prioritaire (clique, apparition du style :active une demi seconde et plus de style :active ni de :hover)

Si tu attribut un :hover à l'un de tes éléments alors sur mobile le:hover reste actif jusqu’à dé-sélection.(à condition de ne pas avoir attribuer de :active)