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);
});

[sixweb]

Code :

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

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

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 :

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

$(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 :

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

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

[sixweb]

Code :

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

$(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 :

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

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

merci bovino ca marche niquel.

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

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

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 :

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

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>