[Problème] Changement de couleur au survol d'une chaîne comportant <strong>

[PhilJ]

Bonjour,


Je cherche un moyen de permettre qu'un paragraphe entier comportant une chaîne <strong>...</strong> change de couleur au survol quelle que soit la zone survolée du paragraphe.

Exemple :
—

<p class="classe"><a href="#">Une partie de ce paragraphe est en caractères <strong>gras</strong>.</a></p>

Je peux bien sûr cibler le texte en gras et le texte « maigre », et faire en sorte que l'un ou l'autre change de couleur, mais comment faire pour que l'un et l'autre change de couleur simultanément ?


Quelqu'un aurait-il une idée ?


D'avance merci de vous pencher sur ce problème.

[lomart]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

Bonjour,

Il n'existe pas de solution en CSS mais un petit bout de jquery devrait faire l'affaire.
J'ai simulé la situation ici: http://jsfiddle.net/g0e3xkoy/

Bonne journée

[electrocity]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

Bonjour,
Il me semble que le selecteur CSS:

p:hover strong

fonctionne dans tous les navigateur actuel

[lomart]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

p:hover strong cible le contenu de la balise strong alors que la demande est de cibler tout le contenu d'une balise p qui contient une balise strong (si j'ai bien compris)

[PhilJ]

Re : Changement de couleur au survol d'une chaîne comportant &amp;amp;lt;strong&amp;amp;gt;

@lomart : merci beaucoup !

p:hover strong cible le contenu de la balise strong alors que la demande est de cibler tout le contenu d'une balise p qui contient une balise strong (si j'ai bien compris)

Exact.

Merci tout de même à Electrocity .

[electrocity]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

Je cherche un moyen de permettre qu'un paragraphe entier comportant une chaîne <strong>...</strong> change de couleur au survol quelle que soit la zone survolée du paragraphe.

si survole du paragraphe alors strong change de couleur :

p:hover strong {
color: red;
}

Ou alors la question est mal formulée ou alors personne n'a fait le teste ?
Cordialement,
Patrick.

[ghazal]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

Salut,
peut-être trouveras-tu ton bonheur dans ces tutoriaux :

http://www.queness.com/search?search=hover+effect

Pour ta question, le plus simple serait d'adapter celui-là :
How to Create Five Simple Hover Effects for Your Navigation Links

http://www.queness.com/post/16119/how-to-create-five-simple-hover-effects-for-your-navigation-links

Autrement, moi aussi j'y vais de mon petit exemple jquery :
avec la fonction hover

http://codepen.io/ghazalp/pen/YPNbWP

Tu remarqueras que j'ai attribué la classe "classe" de ton exemple au tag a

[lefabdu51]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

pour le texte en gras:
p:hover strong {
color: red;
}

pour le texte en maigre vu que dans l exemple il y a un lien :
p:hover a {background:blue;}

[lomart]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

Bonjour,

@ghazal
J'ai pas trop compris l'intérêt d'utiliser du jquery pour changer la couleur du texte au survol. Le css .classe:hover le fait très bien

@ghazal et lefabdu51
la question était : cibler tout le contenu d'une balise p qui contient une balise strong.
Si c'était possible en CSS, on aurait une règle de ce genre

strong:parent{background-color:red;}

[ghazal]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

@lomart
je te renvoie à la lecture de ce post :
[Problème] Effet :hover en CSS ne fonctionne pas sous iOS (iPhones, iPads)

http://forum.joomla.fr/showthread.php?204965-Effet-hover-en-CSS-ne-fonctionne-pas-sous-iOS-%28iPhones-iPads%29&highlight=ipad

[lomart]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

Peut-être, mais tu connais beaucoup de gens qui font des hover sur iMachin.
Je pense qu'il faut mieux éviter les effets difficilement reproduisibles et compréhensibles par les utilisateurs lambda de tablettes comme l'effet de zoom au survol dont il est question dans ton post (que j'avais suivi à l'époque).
Et, de toutes les façons, ton code ne répond pas à la question d'origine: cibler tout le contenu d'une balise p qui contient une balise strong.

[fynhooft]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

Bonjour,

rajoute une classe "ya-du-gras" à ton paragraphe. Tu as alors ce code :

<p class="classe [B]ya-du-gras[/B]">
<a href="#">Une partie de ce paragraphe est en caractères <strong>gras</strong>.</a>
</p>

et dans le CSS, tu mets :

p.ya-du-gras:hover{
background: green;
}

[PhilJ]

Re : Changement de couleur au survol d'une chaîne comportant &lt;strong&gt;

Bonjour,


Et merci à tous ceux qui ont proposé une solution. Je ne me suis pas manifesté depuis un moment car j'avais perdu le fil, ou plus exactement le fil m'avait perdu (aucun email m'informant que la discussion continuait). Désolé.

Je regarde de près toutes ces propositions dès que je trouve le temps (c'est-à-dire dès que je trouve le temps ).


Encore merci à tous les contributeurs.



PhilJ