Changer l'aspect de deux div au survol

Bonjour tout le monde tout nouvel inscrit ,mais vieux suiveur si on puis dire

Je me décide aujourd'hui a poster pour avoir un peu d'aide car bien qu'il y ait des sujets qui ressembles à ma demande aucun d'eux ne m’éclaire sur mon problème précisément.

Je fais un exercice de création de slider pour photo ( je sais qu'il en existe des tout prêt à l'emplois mon but et d'apprendre d'ou l'exercice xd),
Donc j'ai mon cadre principal et à l'interieur de celui-ci 3 autres.
Quand je survol celui de droite il change d'aspect idem pour celui de gauche.

Et c'est la que je bloque je voudrais qu'au survol de celui du milieu les cadre a droite et a gauche change d'aspect en même temps.

J'ai donc un prolème de gestion avec le hover

voyez plutot:

<!--cadre principal-->
		<div id="cadreImage" >
	
			<!--rectangle de droite-->
			<div id="suivante">
			
			
			
			</div>
			
			<!--rectangle du milieu-->
			<div id="actuel">
			
			
			
			</div>
			
			<!--rectangle de gauche-->
			<div id="precedente">
			
			
			
			</div>
		
		
		
		</div>

#cadreImage
 {
	 border:solid red ;
	 width:300px;
	 height:300px;
	 background-image:url("image/image1.jpg");
	 
	 display:flex;
 }
 
 #actuel
 {
	 border:solid black;
	 height:100%;
	 flex:3;
 }
 
 #actuel:hover  #suivante,#actuel:hover > #precedente
 {
	background:rgba(255,255,255,0.5);
 }
 
 
 
#suivante
 {
	 border:solid green;
	 height:100%;
	 width:20%;
	 flex:1;
 }
 
#suivante:hover
 {
	background:rgba(255,255,255,0.5);
	 
 }
 
 
#precedente
 {
	 border:solid black;
	 height:100%;
	 width:20%;
	 flex:1;
 }
 
#precedente:hover
 {
	 background:rgba(255,255,255,0.5);
 }

merci de votre aide
Modifié par pirato (12 Jun 2018 - 18:09)

Bon je reviens vers toi car c'est parfait, je connaissai flex-box et pourtant je n'aipas eu l'idée de l'ordonnancement avec la proprieté hover pour que cela fonctionne correctement


Merci pour la reactivité et les liens qui vont bien avec