Discussion :

[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 :

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

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 :

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

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 :

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
 
<!-- 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]

mouseenter et mouseleave ?

non il y a que mouseleave !

[SpaceFrog]

ben justement !
remplace ton hover par mouseenter !

[sixweb]

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 :

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

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