Animation qui se répète

[sixweb]

Bonjour, j'ai un souci :

j'ai une liste de produits(prestashop) qui s affiche dans des <li>, j'ai fait un script qui affiche un bloc "en savoir plus" en opacity lorsque je passe ma souris sur une des <li> sauf que cet effet affiche tout mes blocs "en savoir plus" lorsque je passe ma souris sur une des <li> , j'ai chercher pendant des heures sur le net, fait plusieurs test avec différentes fonctions mais toujours le meme souci ! si quelqu'un pourrait me filer un coup de main ce serai sympa car la je bloque !

Ci joint le code (css, js et html/php):

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.category-bloc-hover{
background:url(../img/overlay.png);
color:white;
font-size:12px;
line-height:25px;
display:block;
}
#englobhover{
position:absolute;margin:65px 0 0 12px;
width:150px;
height:25px;
line-height:25px;
display:block;
}

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function(){
		$('#englobhover span').hide(); 
 
		$('#product_list li').hover(function(){
			$('#englobhover span').fadeToggle(500);
		});
 
		$('#product_list li').mouseleave(function(){
			$('#englobhover span').hide('fade');
		});
 
	return false;
});

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
			<h3 id="englobhover"> <span class="category-bloc-hover">Voir le produit</span></h3>
 
				<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>
				<h3 class="titre-produits">{if isset($product.new) && $product.new == 1}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
 
 
 
				{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
				{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
				{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
				{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
 
				<!-- prix -->{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="category-prix-produits"">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
 
				{/if}
 
		</li>
	{/foreach}
	</ul>

[SpaceFrog]

mouseenter et mouseleave ?

[sixweb]

Envoyé par SpaceFrog

mouseenter et mouseleave ?

non il y a que mouseleave !

[SpaceFrog]

ben justement !
remplace ton hover par mouseenter !

[sixweb]

Envoyé par SpaceFrog

ben justement !
remplace ton hover par mouseenter !

j'ai deja essayé et c'est toujours pareil !

je te joint le lien du site en dev par mp si tu veux voir ce que a donne !

[Bovino]

Code :

1
2
3
$('#product_list li').hover(function(){
	$(this).fadeToggle(500);
});

[sixweb]

Envoyé par Bovino

Code :

merci bovino, mais dans cette fonction c'est que mon element #product_list li qui a un effet et mon bloc #englobhover span ne s'affiche pas car il n'est pas appelé.

Je souhaiterai que quand je passe ma souris sur #product_list li mon bloc #englobhover span s'affiche .

désolé je débute en js !

[Bovino]

Code :

$(this).find('#englobhover span')

Mais bon, vu que tu as manifestement des id qui se répètent, ça risque d'être problématique...
Ou sinon

Code :

$(this).find('h3 span')

[sixweb]

Envoyé par Bovino

Code :

$(this).find('#englobhover span')

Mais bon, vu que tu as manifestement des id qui se répètent, ça risque d'être problématique...
Ou sinon

Code :

$(this).find('h3 span')

merci bovino ca marche niquel.

Je joint le code si ca peut aider quelqu un sait on jamais

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script type="text/javascript">
$(document).ready(function(){
		$('#englobhover span').hide(); 
 
		$('#product_list li').hover (function(){
			$(this).find('h3 span').fadeToggle(500);
		});
 
		$('#product_list li').mouseleave(function(){
			$(this).find('h3 span').hide('fade');
		});
 
	return false;
}); 
</script>

[Bovino]

Le mouseleave est inutile : hover gère à la fois le mouseenter et le mouseleave.
Si tu ne lui passes qu'une fonction en paramètre, elle sera exécutée pour chacun des deux événements, si tu en passes deux, elles seront appelées alternativement.

[sixweb]

Envoyé par Bovino

Le mouseleave est inutile : hover gère à la fois le mouseenter et le mouseleave.
Si tu ne lui passes qu'une fonction en paramètre, elle sera exécutée pour chacun des deux événements, si tu en passes deux, elles seront appelées alternativement.

ok merci je ne savai pas, c'est corrigé :

Code :

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function(){
		$('#englobhover span').hide(); 
 
		$('#product_list li').hover (function(){
			$(this).find('h3 span').fadeToggle(500);
		});
 
	return false;
}); 
</script>