Afficher un div sur un hover

**Pifon** · 13/11/2014, 00h38

Bonjour

j'ai un souci avec hover que je n'arrive pas du tout à solutionner c'est pourquoi je me permet de poster.

je souhaiterais faire apparaître une div lorsqu'on survole l'image download.png avec la souris

voici mon html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<div id ="fiche" class="div_photo">
	<div id = "photo" >	
		<div id = "photo2" class ="div_reseaux_sociaux">	
			<div class="fb">Facebook</div>
			<div class="twitter">Twitter</div>
			<div class="linkedin">Linkedin</div>
		</div><!--photo2-->		
	</div><!--photo-->	
	<div id ="corps" >
		<div  class="menu"></div><!--menu-->
		<div id="pied">
			<a href="#" id="download" ><img src="download.png" class="dl"/></a>
			<a href="#" id="delete"><img src="delete.jpg"/></a>	
		</div>
		<div class="Ajouter_sur_fb"></div>
	</div><!--corps-->
</div><!--fiche-->		
</body>

voila ce que j'ai fais en css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.menu{
	position:absolute;
	width:99.5%;
	height:76%;
	border:solid 3px yellow;
}
.menu:hover .dl{
	border:solid 5px blue;
}

or, la div n’apparaît pas quand je survole l'image !

pourtant j'ai fais la même avec succès chose juste avant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.div_reseaux_sociaux{
	display: none;
}
.div_photo:hover .div_reseaux_sociaux{
	display: block; 
}

Voila si quelqu'un pouvait m'aider çà serait grandement apprécié .
D'avance merci

Invité · 13/11/2014, 06h28

Bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div  class="menu"></div><!--menu-->

L'élément de class .dl n'est pas dans le menu.

Il est néanmoins possible d'utiliser le sélecteur d'adjacence : "+"

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.menu:hover + #pied .dl{
	border:solid 5px blue;
}

**Pifon** · 13/11/2014, 10h42

Je te remercie vivement de me venir en aide jreaux62, j'ai modifier mon code en incluant l'élément .dl dans le menu :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id ="corps" >
	<div  class="menu">
		<div id="pied">
			<a href="#" id="download" ><img src="download.png" class="dl"/></a>
			<a href="#" id="delete"><img src="delete.jpg"/></a>	
		</div>
	</div><!--menu-->
	<div class="Ajouter_sur_fb"></div>
</div><!--corps-->
</div><!--fiche-->

Et , en CSS je veux qu'au survole de .dl (l'image) la div de class menu s'affiche donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.menu{
	position:absolute;
	width:99.5%;
	height:76%;
	border:solid 3px yellow;
}
 .dl:hover .menu{
	border:solid 5px blue;
}

j'ai également essayé avec "+" comme tu me l'as conseillé mais sans résultat

ce qui est étrange c'est que si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 .menu:hover .dl{
	border:solid 5px blue;
}

le résultat obtenu est que l'image à son bord coloré en bleu lorsque je survole la div menu!

**NoSmoking** · 16/11/2014, 17h57

Bonjour,

ce qui est étrange c'est que si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 .menu:hover .dl{
	border:solid 5px blue;
}

le résultat obtenu est que l'image à son bord coloré en bleu lorsque je survole la div menu!

c'est ce que tu demandes non ?

**Pifon** · 16/11/2014, 22h00

Non pas tout a fait je voulais qu'au survole d'une image, une div apparaisse.
Là ,la div apparaît lorsque je survole son emplacement.

Selon moi la syntaxe est : élément_qui_lors_de_son_survole_affichera_l'elevent_caché :hover élément_caché

Finalement j'ai fais tout à fait autrement, mais je pense que mes différente div étaient mal positionnée dans mon html.

**philippef** · 18/11/2014, 21h18

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.div_photo:hover .div_reseaux_sociaux{
	display: block; 
}

essaies plutôt ça. j'avais le même problème

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.div_photo:hover .div_reseaux_sociaux{
	display: inline;

Afficher un div sur un hover

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager