Discussion :

[Friksstyle]

Bonjour à tous,

Je dois actuellement faire afficher une petite bande noire avec un titre qui vient en superposition d'une div lorsqu'on survole celle-ci.

J'ai bien réussi à faire cette animation. Mais le problème est que lorsque l'utilisateur va sur cette fameuse bande noire (pour cliquer puisqu'il y a un lien) l'animation de mon "mouseOut" se lance, puis celle de mon "mouseOver" et ainsi de suite.

Voici mon code pour que vous compreniez:

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
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
 
<div id="main-news">
		<div class="news">
			<div class="news-img">
 
				<img src="./upload/actu01.png" alt="" />
				<div>
					<p>Actu</p>
				</div>
			</div>
			<p class="news-text">
				Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, dissidentes, quarum si altera defuisset, ad perfectam non venerat summitate [...]
			</p>
		</div>
 
		<div class="news">
			<div class="news-img">
 
				<img src="./upload/actu01.png" alt="" />
				<div>
					<p>Actu</p>
				</div>
			</div>
			<p class="news-text">
				Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, dissidentes, quarum si altera defuisset, ad perfectam non venerat summitate [...]
			</p>
		</div>
 
		<div class="news">
			<div class="news-img">
 
				<img src="./upload/actu01.png" alt="" />
				<div>
					<p>Actu</p>
				</div>
			</div>
			<p class="news-text">
				Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, dissidentes, quarum si altera defuisset, ad perfectam non venerat summitate [...]
			</p>
		</div>
 
		<div class="news">
			<div class="news-img">
 
				<img src="./upload/actu01.png" alt="" />
				<div>
					<p>Actu</p>
				</div>
			</div>
			<p class="news-text">
				Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, dissidentes, quarum si altera defuisset, ad perfectam non venerat summitate [...]
			</p>
		</div>
	</div>

CSS

Code css :

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
 
#main-news
{
	width:1280px;
	height:234px;
	margin:auto;
	background-image:url(./../img/bg-actu.png);
}
 
.news
{
	width:313px;
	height:184px;
	margin-top:15px;
	float:left;
	margin-left:7px;
}
 
.news-img
{
	width:313px;
	height:123px;
	overflow:hidden;
 
}
 
.news-img img
{/*
	position:absolute;*/
	z-index:0;
}
 
.news-img div
{/*
	position:absolute;*/
	width:313px;
	background-color:#000;
	color:#fff;
	z-index:2;
	text-align:right;
	font-size:15pt;
	opacity:0.75;/*
	bottom:-86px;
	/*display:none;*/
}
 
.news-text
{
	font-size:11pt;
	width:280px;
	height:80px;
	color:black;
	text-align:justify;
	text-indent:10px;
	margin:auto;
padding-right:10px;
}

JS

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
 
$(document).ready(function()
	{
 
		$('.news-img').mouseover(function(){
			$(this).find("div").animate({"margin-top": "-25px"}, 300);
			return false;
		});
 
		$('.news-img').mouseout(function(){
			$(this).find("div").animate({"margin-top": "25px"}, 300);
			return false;
		});
 
	});

Si vous pouviez m'éclairer là dessus.

Je vous remercie !

[SpaceFrog]

=> mouseenter, mouseleave

[Friksstyle]

Nan mais aussi simple???

Y'a pas une histoire avec un machin du bidule qui ferait la chose?!?!

Je prends le chou avec ça pour au final juste un mouseenter et mouseleave .....


Merci SpaceFrog de m'avoir fait découvrir ces deux fonctions.