Position absolute au dessus d'une div parente avec un overflow auto

**powereborn** · 13/02/2012, 18h59

Bonsoir la compagnie !
Je suis actuellement en train de faire une liste de conversations et au survol je souhaite faire en sorte que l'avatar grossisse et soit au dessus même de la div parente. Donc je fais ça en javascript l'image au survol grossit cependant elle reste derrière la div parente car il y a un overflow : auto. Et effet, j'ai besoin de l'overflow auto car la div possède une scroll barre automatique si jamais la liste de conversations est longue.
Le code HTML ci-dessous :

Code :

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

1
2
3
4
5
6
7
8
9
<div id="conversationsTchatOpen">
				<div id="listConversations">
					<h4>Conversations</h4>
					<ul>
						<li><a href=""><img src="http://lebuzz.info/wp-content/uploads/2010/01/box-office-avatar-film-james-cameron-international-mondial-chiffres-revenus-milliard-us-etats-unis-texte.jpg" alt="avatar" /></a></li>
						<li><a href="">Ami2</a></li>
						<li><a href="">Ami2</a></li>
						<hr class="clear"/>
					</ul></div></div>

Le code css associé :

Code :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#conversationsTchatOpen
{
	width: 570px;
	min-width: 250px;
	position: absolute;
	right: 0;
	bottom: 0;
	border: 1px solid cecaca;
	height: 370px;
	padding: 0;
}
 
#conversationsTchatOpen #listConversations
{
	position: relative;
	float: right;
	width: 250px;
	height: 370px;
	overflow: auto;
	border-left: 1px solid #CCC;
}
 
#conversationsTchatOpen #listConversations ul
{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
 
#conversationsTchatOpen #listConversations li
{
	display: block;
	width: 100%;
	background: url('images/degradeconversations.png') repeat-x;
}
 
#conversationsTchatOpen #listConversations li a
{
	height: 25px;
	display: block;
	padding: 0;
	margin: 0;
}
 
#conversationsTchatOpen #listConversations li a img
{
	position: absolute;
	left: 0;
	top: 2px;
	width: 21px;
	height: 21px;
}

Le code Jquery javascript :

Code :

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

1
2
3
4
5
6
7
8
$("#conversationsTchatOpen #listConversations li a").live({
				"mouseover": function() {
					$(" > img",this).css({"width":"50px","height":"50px","top":"-14px","left":"-14px"})
				},
				"mouseout": function() {
					$(" > img",this).css({"width":"21px","height":"21px","top":"2px","left":"0"})
				}
			});

Lorsque je survole l'image, elle est cachée par les bordures de la div listConversation or je voudrais que l'image soit bien au dessus de cette div. J'ai bien remarqué c'est à cause du overflow mais comment faire alors pour ajouter une exception et que l'image elle soit prise en compte comme dans un overflow:visible ?

Merci d'avance !
Nicolas