comment faire cet effet de hover sur un row de table

**boucdur** · 01/03/2011, 01h17

Bonjour à tous,

on me demande de réaliser un effet qui me parrait franchement compliqué à faire sur un row de table.
en piece jointe l'exemple en image, regarder bien l'effet hover sur le row

Etant donné que l'effet s'applique en hover sur un row (un tr), il me semble que le javascript est indispensable.

Le grossiement de l'ensemble y compris de lataille des caractère et surtout L'effet de decrochage me semble difficile à faire.

Si quelqu'un à une idée de la façon de s'y prendre pour faire ça et de façon compatible meme sur ie7 ce serait très intéressant.

Merci pour votre aide souvent précieuse. biggrin

**SpaceFrog** · 01/03/2011, 08h43

a priori je dirais que la façon la plus simple de faire quelque chose de crossbrowser est de mettre une image en background du tr au survol...
Vu que tes cellules ont toutes l'air d'avoir la même taille ça n'en serait que plus simple ...

**boucdur** · 01/03/2011, 10h25

bien sur,

mais là la largeur du tr au suvol est plus large que celle du tableau dans son etat normal. Si je met une image comme ça au survol c'est tout mon tableau qui va s'elargir non ? pas juste la ligne que je survole ?

**SpaceFrog** · 01/03/2011, 10h34

ou alors tu mets un div légèrement plus grand en z-index de premier plan en le positionnant par rapport au tr survolé pour en effet avoir un effet de dépassement en largeur ...
Je proposais juste un truc simple

**boucdur** · 01/03/2011, 10h46

je vois pas trop comment m'y prendre.
je vais essayé quelquechose et reviens.

A priori ca va être très compliqué donc non ?

**SpaceFrog** · 01/03/2011, 11h22

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<style type="text/css">
#tableau {
border-collapse: collapse;
}
#tableau tr td {
        border: solid 1px silver;
        }
 
#line {
	position:absolute;
	display: none;
	border: solid 1px silver;
	border-bottom:solid 2px gray;
	z-index: 2;
	height: 28px;
	background-color:white;
	border-collapse: collapse;
	}
#line tr td {	border: solid 1px silver;}
</style>
<script type="text/javascript">
$(function(){
$('#tableau tr').hover(function(){
	$('#line').css({top:$(this).offset().top-2+"px",left:$(this).offset().left-2+"px"});
	$('#line').css({width:'205px'})
	$('#line tr').eq(0).html(this.innerHTML)
	$('#line').show();
 
})
 
})</script>
</head>
 
<body>
<table id="line">
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>		
<table id="tableau">
	<tr class="zoom">
		<td>un  </td>
		<td>deux </td>
		<td>trois </td>
		<td>quatre </td>
		<td>cinq </td>
	</tr>
	<tr class="zoom">
		<td>six </td>
		<td>sept </td>
		<td>huit </td>
		<td>neuf </td>
		<td>dix </td>
	</tr>
	<tr class="zoom">
		<td>onze </td>
		<td>douze </td>
		<td>treize </td>
		<td>quatorze </td>
		<td>quinze </td>
	</tr>
 
</table>	
</body>
 
</html>

comment faire cet effet de hover sur un row de table

jQuery

Vue hybride

Discussions similaires

Partager

Partager