Le combinateur d'adjacence indirecte

Par Merlin L'Programmeur, il y a 10 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'aimerais qu'au survol d'une balise <a> qui contient une classe "lien_presse" alors l'image qui est en dessous, qui est dans une div nommé "img_presse_actus" s'assombisse avec le filtre brightness.
Voici mon code

.lien_presse:hover ~ .img_presse_actus img { filter: brightness(30%); -webkit-filter: brightness(30%); -moz-filter: brightness(30%); -o-filter: brightness(30%); -ms-filter: brightness(30%); }

Or pour des raisons qui me reste sombres cette combinaison ne fonctionne pas... Si vous auriez des idées pour m'aider je vous en serez bien reconnaissant :) !

Bien cordialement.

8 réponses

Huggy, il y a 10 ans

Bonjour Merlin,
Aurais-tu un bout de html à nous montrer parce que tu parles d'une div nommée "img_presse_actus" mais nous on voit plûtot une classe "img_presse_actus"

Merlin L'Programmeur, il y a 10 ans

Bonjour Huggy,

Oui pardon je me suis mal exprimé, c'est une div avec comme class "img_presse_actus".
C'est une wordpress donc le html et pas tip top,
Mais voilà ce que j'ai :

<div class="vc_col-sm-3 wpb_column vc_column_container "> <div class="wpb_wrapper"> <div class="wpb_text_column wpb_content_element dossier_presse txt_presse_actus"> <div class="wpb_wrapper"> <p style="text-align: center;"><span style="color: #ffffff;"><a class="lien_presse" style="color: #ffffff;" href="http://salon-international-metiers-art.com/wp-content/uploads/dossierpresse.pdf" target="_blank">Dossier de Presse</a></span></p> </div> </div> <div class="wpb_single_image wpb_content_element img_presse img_presse_actus vc_align_center"> <div class="wpb_wrapper"> <div class="vc_single_image-wrapper vc_box_border_grey"> <img width="262" height="262" src="http://salon-international-metiers-art.com/wp-content/uploads/2016/05/presse.jpg" class="vc_single_image-img attachment-full" alt="presse"> </div> </div> </div> </div> </div>
Huggy, il y a 10 ans

Sinon avec le '+' est-ce qu'on obtient le comportement souhaité ?

<!DOCTYPE html> <html> <head> <style> .lien_presse:hover + .img_presse_actus img { filter: brightness(30%); -webkit-filter: brightness(30%); -moz-filter: brightness(30%); -o-filter: brightness(30%); -ms-filter: brightness(30%); } </style> </head> <body> <a class='lien_presse' href="#">lien presse 1</a> <div class='img_presse_actus'> <img src="http://lorempicsum.com/futurama/800/200/2"> </div> <a class='lien_presse' href="#">lien presse 2</a> <div class='img_presse_actus'> <img src="http://lorempicsum.com/futurama/800/200/2"> </div> <a class='lien_presse' href="#">lien presse 3</a> <div class='img_presse_actus'> <img src="http://lorempicsum.com/futurama/800/200/2"> </div> <a class='lien_presse' href="#">lien presse 4</a> <div class='img_presse_actus'> <img src="http://lorempicsum.com/futurama/800/200/2"> </div> </body> </html>
Merlin L'Programmeur, il y a 10 ans

J'ai essayer avec le + mais sans succès, comme si mon pointeur n'était pas correct :/

Huggy, il y a 10 ans

Oui, comme ton lien est encapsulé dans un P puis un Span, c'est compliqué de retrouver les frères

Huggy, il y a 10 ans

Tu peux t'en sortir en rajoutant une classe sur le P comme ceci

<!DOCTYPE html> <html> <head> <style> .para_lien_presse:hover + .img_presse_actus img { filter: brightness(30%); -webkit-filter: brightness(30%); -moz-filter: brightness(30%); -o-filter: brightness(30%); -ms-filter: brightness(30%); } </style> </head> <body> <p class='para_lien_presse'><span><a class='lien_presse' href="#">lien presse 1</a></span></p> <div class='img_presse_actus'> <div class='wrapper'> <img src="http://lorempicsum.com/futurama/800/200/2"> </div> </div> <p class='para_lien_presse'><span><a class='lien_presse' href="#">lien presse 2</a></span></p> <div class='img_presse_actus'> <div class='wrapper'> <img src="http://lorempicsum.com/futurama/800/200/2"> </div> </div> </body> </html>
Merlin L'Programmeur, il y a 10 ans

Je viens d'essayer en ajoutant une classe sur le p et en fonctionnant comme tu m'as dis mais toujours aucune réaction...
Et le plugins que j'utilise pour réaliser le site internet m'empêche d'ajouter une classe à l'image même en passant en éditeur de texte.
Je ne peux donc pas mieux cibler mes éléments...

Merlin L'Programmeur, il y a 10 ans

Je viens de trouver, encore une preuve que le CSS peut en faire voir de toutes les couleurs quand il le veux ...
Voilà mon code CSS final :

.txt_presse_actus a { position: absolute; display: block; width: 71%; height: 65%!important; font-size: 40px; line-height: 37px; padding-top: 30%; padding-left: 10%; padding-right: 10%; opacity: 0; z-index: 2; } .txt_presse_actus a:hover{ opacity: 1!important; z-index: 2; } .txt_presse_actus:hover ~ .img_presse_actus{ z-index: 0; filter: brightness(30%); -webkit-filter: brightness(30%); -moz-filter: brightness(30%); -o-filter: brightness(30%); -ms-filter: brightness(30%); }

J'ai du rajouter les z-index qui me faisait tout casser et mon pointeur à un poil changer...

En tout cas merci beaucoup pour ton aide Huggy ! :)