28172 sujets

CSS et mise en forme, CSS3

[Résolu] Cibler un élément s'il contient un a à l'état de survol

Bonjour,

La pseudo-classe :has fait économiser des lignes de javascript, voir le tuto de Raphaël.

Je cible une image quand dans son parent une checkbox est cliquée.

Marche
div.list:has(input:checked) > img


J'essaye de cibler une image quand dans son parent un lien est survolé.

Ne marche pas
div.list:has(a:hover) > img


Avez-vous une solution ?
Modifié par boteha_2 (10 Mar 2024 - 12:46)
Modérateur
Bonjour,

La solution, c'est que 
div.list:has(a:hover) > img
marche très bien.

Exemple (on survole le lien, une bordure rouge apparait autour de l'image) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>has hover</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.list:has(a:hover) > img {border: 10px solid red;}
</style>
</head>
<body>
<div class="list">
<a href="#">Mon beau lien</a>
<img src="myImg.jpg">
</div>
</body>
</html>

À ta décharge, le concept de :hover étant une vraie cochonnerie, on a vite fait de se tromper dans le code dès que c'est un peu tarabiscoté.

Amicalement,
Bonjour parsimonhi,

Tu as raison, cela marche, une fois de plus merci.

Je coche résolu.

Mais qu'as-tu contre le concept de :hover ?
Modérateur
Bonjour,

boteha_2 a écrit :
Mais qu'as-tu contre le concept de :hover ?
Déjà, il n'existe que sur certaines machines. Quand tu cliques avec le doigt, le hover n'existe pas vraiment, même si les machines où tu cliques avec le doigt bricolent quand même des trucs quand elles voient un hover dans ton code pour te sauver la mise.

Ensuite, mis à part les hovers cosmétiques du genre je passe ma souris au dessus d'un bouton et je le fais changer de couleur (ça, ok, ça marche assez facilement), les autres hovers sont souvent source de difficulté pour le développeur (qui doit faire gaffe à 10000 trucs pour que son hover fonctionne comme attendu, et pour prévoir ce qu'il faut au cas où la machine de l'utilisateur est pilotée avec les doigts, ou le clavier, ou la voix, ou je ne sais quoi d'autre) et pour l'utilisateur (qui doit se contorsionner dans tous les sens pour faire marcher le diabolique hover que le développeur a eu tant de mal à mettre au point). Moi qui ai les doigts plus si agiles que ça, je peux te dire que quand je vois qu'il faut que je fasse un hover, je maudis le développeur plutôt que je le remercie.

Enfin, les forums web sont pavés de questions qui contiennent des phrases du genre "J'ai un hover qui ne marche pas" alors qu'il marche très bien. Smiley biggol Smiley biggol Smiley biggol

Bref, tout ça pour dire qu'à part les hovers qui vont juste changer l'aspect de quelque chose de manière marginale quand on passe au dessus, je n'en mets pas dans mes codes et je déconseille aux autres d'en mettre.

Amicalement,
parsimonhi a écrit :
Bref, tout ça pour dire qu'à part les hovers qui vont juste changer l'aspect de quelque chose de manière marginale quand on passe au dessus, je n'en mets pas dans mes codes et je déconseille aux autres d'en mettre.


Ah oui, 100 % d'accord, :hover uniquement pour de petits effets cosmétiques, en sachant que cela ne marcheta pas sur les téléphones ni en gros sur toutes autres machines sans souris.

Une exception : l'ouverture d'un menu déroulant au survol (comme dans le menu haut d'Alsacréations).
Avec :hover il me semble que c'est bien géré au moins par les téléphones.
Modifié par boteha_2 (10 Mar 2024 - 16:04)
Modérateur
Bonjour,
boteha_2 a écrit :
Une exception : l'ouverture d'un menu déroulant au survol (comme dans le menu haut d'Alsacréations).
Il me semble que c'est bien géré au moins par les téléphones.
Le menu est remplacé par un bouton sur lequel il faut cliquer.

EDIT: si tu mets ton téléphone en mode paysage, tu vas avoir le menu comme sur un écran non-tactile. Si tu cliques, le menu se déplie et ça rentre dans la catégorie : "les machines où tu cliques avec le doigt bricolent quand même des trucs quand elles voient un hover dans ton code pour te sauver la mise." Mais à moins d'avoir un QI de 200, je te mets au défi de comprendre comment ça marche en toutes circonstances et sur toutes les machines.

Amicalement,
Modifié par parsimonhi (11 Mar 2024 - 06:22)
Bonjour,

parsimonhi a écrit :
EDIT: si tu mets ton téléphone en mode paysage, tu vas avoir le menu comme sur un écran non-tactile. Si tu cliques, le menu se déplie et ça rentre dans la catégorie : "les machines où tu cliques avec le doigt bricolent quand même des trucs quand elles voient un hover dans ton code pour te sauver la mise." Mais à moins d'avoir un QI de 200, je te méfie au défi de comprendre comment ça marche en toutes circonstances et sur toutes les machines.


Donc tu conseilles de ne pas utiliser :hover pour cet usage.

Mais en deux mots par quoi le remplaces-tu, ou le complètes-tu ?
Modérateur
Bonjour,
boteha_2 a écrit :
Mais en deux mots par quoi le remplaces-tu, ou le complètes-tu ?
Boutons et liens sur lesquels tu cliques. Dans 99% des cas, ça le fait très bien.

Amicalement,
parsimonhi a écrit :
Boutons et liens sur lesquels tu cliques. Dans 99% des cas, ça le fait très bien.


Mais alors avec une petite couche de javascript ?
Modérateur
Bonjour,

boteha_2 a écrit :
Mais alors avec une petite couche de javascript ?
Normalement pas besoin (sauf s'il s'agit par exemple d'un widget qui est en javascript lui-aussi).

C'est au cas par cas. Si je le peux, je préfère tout caser dans un seul menu sans sous-menus cachés au premier affichage. Je peux aussi avoir une première barre pour le menu principal, et une deuxième barre pour le sous-menu actif. Je peux aussi avoir un menu principal commun à toutes les pages, et des sous-menus qui changent à chaque page, adaptés à la page visitée. J'aime bien aussi la balise details (mais je suis en minorité sur ce point).

Bref, il y a des tas de possibilités que je suis loin d'avoir toutes citées, et qui dépendent pas mal du besoin exprimé.

Mais si tu tiens à ton hover, pourquoi pas ? Tu pourras en mettre "plein" dans une place réduite, et croiser les doigts pour que ça marche partout. Et tout le monde fait ça en plus, pas croiser les doigts, mais des menus qui se déclenchent au hover ! Smiley cligne

Amicalement,
Merci pour tes explications.

Je me centre sur le menu déroulant d'Alsacréations.

Pour moi le comportement sympa est :

Cela répond au survol (:hover).
Et il est prévu un chouïa de code pour répondre aussi au clic afin de couvrir tous les cas.

Es-tu d'accord ?

Je suppose que le sujet a été traité mille fois mais je veux bien ouvrir une nouvelle discussion pour un point définitif.

PS : moi-aussi j'aime bien <details>.
Modifié par boteha_2 (10 Mar 2024 - 19:06)
Prévenir un modérateur
Répondre au sujet
Aller à