Bonsoir à tous,
Voilà un fervent utilisateur de jQuery, je rencontre parfois quelques problèmes que je qualifierais d'illogique, vous allez mieux comprendre dans quelques lignes.
Voilà en gros je souhaitent animé mes pages web, en modifiant le CSS afin de faire jolis effets et ce avec la méthode animate(). L'évènement choisi sera un mousenter et un mouseout sur une liste d'images.
Je vais tout de suite procéder à l'illustration par le code :
CODE CSS :
CODE HTML :
Ne vous souciez pas vraiment du code, derrière il y a le moteur de Tehlia basé sous SPIP, j'en ai supprimé les boucles pour éviter la confusion, mais les #IMAGE... vous imaginez que cela correspond au résultat souhaité
Et enfin le CODE JS :
Donc le résultat souhaité est simplement de faire un "highlight" sur l'image lorsque l'utilisateur passe ca souris sur l'image, en l'occurrence la classe hello qui comprend l'image et le titre h4. Puis de revenir à son état d'origine lorsque le curseur quitte l'image.
Le comportement étrange se réalise lorsque vous rentrez dans l'image et que vous passez ensuite sur le titre (qui est superposé sur l'image). Ce qui à pour effet de considérer que vous êtes sortis de l'élément portant la classe hello, ce qui n'est absolument pas le cas !!
Un peu étrange comme explication, je vous invites donc à comprendre mieux ma situation via le site, il s'agit du bloc nouveautés en bas de page : retroparadize.com.
Bien cordialement, Simon.
Voilà un fervent utilisateur de jQuery, je rencontre parfois quelques problèmes que je qualifierais d'illogique, vous allez mieux comprendre dans quelques lignes.
Voilà en gros je souhaitent animé mes pages web, en modifiant le CSS afin de faire jolis effets et ce avec la méthode animate(). L'évènement choisi sera un mousenter et un mouseout sur une liste d'images.
Je vais tout de suite procéder à l'illustration par le code :
CODE CSS :
Bloc de code:
#nouveaute .thumbnail {opacity : 0.2;}
#nouveaute ul li {float : left; width : 180px; height : 147px; overflow : hidden;}
#nouveaute h4 {position : relative; width : 180px; top : 80px;text-align : center;}CODE HTML :
Bloc de code:
<div id="nouveaute">
<img src="images/news-label.png" alt="Nouveautés" />
<ul>
<li class="hello">
<h4>Casquette</h4>
<a href="#URL">
<img class="thumbnail" src="#IMAGE" alt="#PRODTITRE " title="#PRODTITRE " border="0" />
</a>
</li>
</ul>
</div>Ne vous souciez pas vraiment du code, derrière il y a le moteur de Tehlia basé sous SPIP, j'en ai supprimé les boucles pour éviter la confusion, mais les #IMAGE... vous imaginez que cela correspond au résultat souhaité
Et enfin le CODE JS :
Bloc de code:
$('.hello').mouseenter(function() {
$(this).children("a").children("img").animate({opacity:'1'}, 150);
});
$('.hello').mouseout(function() {
$(this).children("a").children("img").animate({opacity:'0.2'}, 400);
});Donc le résultat souhaité est simplement de faire un "highlight" sur l'image lorsque l'utilisateur passe ca souris sur l'image, en l'occurrence la classe hello qui comprend l'image et le titre h4. Puis de revenir à son état d'origine lorsque le curseur quitte l'image.
Le comportement étrange se réalise lorsque vous rentrez dans l'image et que vous passez ensuite sur le titre (qui est superposé sur l'image). Ce qui à pour effet de considérer que vous êtes sortis de l'élément portant la classe hello, ce qui n'est absolument pas le cas !!
Un peu étrange comme explication, je vous invites donc à comprendre mieux ma situation via le site, il s'agit du bloc nouveautés en bas de page : retroparadize.com.
Bien cordialement, Simon.
