Le combinateur d'adjacence indirecte
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
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 ! :)
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"
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>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>J'ai essayer avec le + mais sans succès, comme si mon pointeur n'était pas correct :/
Oui, comme ton lien est encapsulé dans un P puis un Span, c'est compliqué de retrouver les frères
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>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...