вместо одного конкретного элемента работают все

[Garri]

День добрый, в java и jquery знаний практически никаких но потребовалось написать простейший скриптец, написал но работает не так как хочется, нужно что-бы при наведении на класс .picca активизировалась только одна дивка с таким классом (их на странице много) кто сможет помочь?
сам скрипт вписаный в tpl файл :
<script type="text/javascript">
$(".picca").hover(function(){
$(".cart").animate({marginTop:'25px'},100);}, function() {
$(".cart").animate({marginTop:0},100);
});
</script>
сайт http://dostavka-edy.by/index.php?rou...lter_sellers=2
заблаговременно спасибо)

[ksa]

нужно что-бы при наведении на класс .picca активизировалась только одна дивка с таким классом

Какая именно? Первая, последняя или N-нная?

Есть ли вариант изменения разметки? Т.е. как-то все же пометить нужный элемент (например другим классом дополнительно)?

[utb]

Давай еще информации, возможно все решаемо с помощью стилей

[Deff]

не так как хочется, нужно что-бы при наведении на класс .picca активизировалась только одна дивка с таким классом

Самое простое, при верстке добавить этому div доп класс или ID

[Garri]

новый класс добавлять к дивке бесполезно так-как дивки товаров в интернет магазине генерируются и клонируются из одной которая прописана в файле tpl
вот полный код самой дивки товара по аналогии которой создаются остальные:
<?php foreach ($products as $product) { ?>
<div>
<div class="picca">
<div class="product-topbg">
<div class="product-bg">
<div class="product-bottombg">
<?php if ($product['thumb']) { ?>
<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
<?php } ?>
<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
<div class="description"><?php echo $product['description']; ?></div>
<?php if ($product['price']) { ?>
<div class="price">
<?php if (!$product['special']) { ?>
<?php echo $product['price']; ?>
<?php } else { ?>
<span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
<?php } ?>
<?php if ($product['tax']) { ?>
<br />
<span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
<?php } ?>
</div>
<?php } ?>
<?php if ($product['rating']) { ?>
<div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>

<?php } ?>
</div>
</div>
</div>

<div class="cart"><div class="sell-holder">
<span class="quantity">

<span class="number">
<input type="text" id="quantity-<?php echo $product['product_id']; ?>" name="quantity" size="2" value="<?php echo $product['minimum']; ?>" />
<input type="hidden" id="quantity-<?php echo $product['product_id']; ?>-minimum" value="<?php echo $product['minimum']; ?>" />
</span>
<span class="wrap-quantity">
<a class="add" onclick="addquantity('<?php echo $product['product_id']; ?>')">+</a>
<a class="clear" onclick="clrquantity('<?php echo $product['product_id']; ?>')" >-</a>
</span>
</span>
<?php if ($product['minimum'] > 1) { ?>
<div class="minimum"><?php echo $product['text_minimum']; ?></div>
<?php } ?>
</div>
<a onclick="PlusToCart('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart; ?></span></a>
</div>

</div>
</div>
<?php } ?>
</div>
<div class="pagination"><?php echo $pagination; ?></div>
<?php } ?>
<?php if (!$categories && !$products && $filter_sellers) { ?>
<div class="content"><?php echo $text_empty; ?></div>
<div class="buttons">
<div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>
</div>
<?php } ?>
<?php echo $content_bottom; ?></div>
<script type="text/javascript">
$(".picca").hover(function(){
$(".cart").animate({marginTop:'25px'},100);}, function() {
$(".cart").animate({marginTop:0},100);
});
</script>

просто перейдите по ссылке данной мною выше, и наведите на товар, нужно что-бы активизировалась только та кнопка купить что относится к этому товару.

[utb]

с помощью css, но только современные браузеры:

.picca:hover cart {
 margin-top: 25px;
}

можно и с помощью jquery

[Deff]

Может так

<script type="text/javascript">
 $(".picca").mouseenter(function(){
 var crt = $(this).find(".cart").eq(0);
 crt.stop().animate({marginTop:'25px'},100, "linear", function(){
 crt.animate({marginTop:0},100);
   });
 });
 </script>

[Garri]

да теперь гораздо лучше, но мне нужно что-бы при наведении на .picca класс .cart опускался вниз (marginTop) и оставался так до тех пор пока курсор наведен на .picca

[Deff]

Наверно так...

<script type="text/javascript">
 var picca_crt;
 $(".picca").mouseenter(function(){
 picca_crt= $(this).find(".cart").eq(0);
 picca_crt.stop().animate({marginTop:'25px'},100);
 }).mouseleave(function(){
 picca_crt.stop().animate({marginTop:0},100);
 });
 </script>

[Garri]

все классно заработало, огромное спасибо))