Hover sur un label au survol d'une image

**Thewil** · 01/07/2009, 16h01

Bonjour,

Je m'explique. j'ai le code suivant :

Code :

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

1
2
3
4
<span class="aHover">
<label class=""> ASurligner </label>
<img class="maClass" height="12" width="12" src="images.png"/>
</span>

ou celui-ci

Code :

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

1
2
3
4
5
6
<span class="aHover">
<label>LeLabelASurligné</label>
<a href="action">
<img id="ID" class="maClass" height="12" width="12" src="images.png"/>
</a>
</span>

Chaque label est sur une ligne avec l'image à coté. Donc en gros je voudrais que quand je passe sur l'image le background de mon label change. J'ai donc fais

Code :

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

1
2
3
4
5
$("#id img").hover(function(){
			   $(this.parentNode.firstChild).addClass("hover");
			 },function(){
			   $(this.parentNode.firstChild).removeClass("hover");
 		});

Ca marche dans le premier cas mais dans le second le this.parentNode.firstChild ne fonctionne pas ce qui est normal. Suis-je obliger de déclarer un autre .hover avec l'autre $this ou yaurai t'il moyen de tout faire dans le même .hover.

Merci

EDIT:
Je suis aussi preneur du hover sur mon label qui me surligne le label et l'image car en fait je n'arrive pas à faire cela car l'image est hors du flux
Le css de l'image

Code :

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

1
2
3
4
5
6
7
img.class {
cursor:pointer;
float:right;
position:relative;
right:10px;
top:-18px;
}

**bigben89** · 01/07/2009, 17h16

Petite question bête. Tu montres 2 exemples de code, tu hésites entre les 2 écritures ou les 2 écritures sont présentes dans ta page ?
Il vaut mieux se cantonner à une seule des 2 écritures.

Dans le 1er cas, je ferais le code suivant :

Code :

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

1
2
3
4
5
$('.maClass').hover(function(){
    $(this).prev('label').addClass('hover');
}, function(){
    $(this).prev('label').removeClass('hover');
})

Dans le 2ème cas :

Code :

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

1
2
3
4
5
$('.maClass').hover(function(){
    $(this).parent().prev('label').addClass('hover');
}, function(){
    $(this).parent().prev('label').removeClass('hover');
})

**Thewil** · 01/07/2009, 17h26

Les 2 sont dans ma page, l'endroit ou je veux faire cette effet a cet aspect la

Label img
---label img
---label img
---label img
Label img
---label img

C'est un arbre et je voudrai qu'au survol des lignes comprenant un label le background change pour mieux voir sur qu'elle ligne est la souris.

**bigben89** · 01/07/2009, 18h10

Tu n'aurais pas un exemple de code html, pour qu'on puisse mieux comprendre l'organisation de ton code ?

**Thewil** · 01/07/2009, 18h42

Ben c'est comme dans mon premier post mais j'en posterai un peu plus demain si nécessaire

**danielhagnoul** · 01/07/2009, 20h26

Bonsoir.

Exemple :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
 
		/* test */
		img.maClass {
			vertical-align:text-top;
			margin-top:12px;
			margin-right:12px;
			cursor:pointer;
			border:none;
		}
		img.bordure {
			border:2px solid #FF0000;
		}
		label.hover {
			background-color:#FF0000;
		}
	</style>
	<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('img.maClass').hover(
				function(){
					$(this).addClass("bordure");
 
					$(this).parents("span.aHover").find("label").addClass("hover");
				},
				function(){
					$(this).removeClass("bordure");
 
					$(this).parents("span.aHover").find("label").removeClass("hover");
				}
			);
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<p>
			<span class="aHover">
				<label> ASurligner </label>
				<img class="maClass" height="200" width="270" src="../images/imageTest.png"/>
			</span>
		</p>
		<p>
			<span class="aHover">
				<label>LeLabelASurligné</label>
				<a href="action">
					<img id="ID" class="maClass" height="200" width="270" src="../images/imageTest.png"/>
				</a>
			</span>
		</p>
		<p style="clear:both;">&nbsp;</p>
	</div>
</body>
</html>

Hover sur un label au survol d'une image

jQuery

Vue hybride

Discussions similaires

Partager

Partager