вместо одного конкретного элемента работают все
День добрый, в 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 заблаговременно спасибо) |
Цитата:
Есть ли вариант изменения разметки? Т.е. как-то все же пометить нужный элемент (например другим классом дополнительно)? |
Давай еще информации, возможно все решаемо с помощью стилей :)
|
Цитата:
|
новый класс добавлять к дивке бесполезно так-как дивки товаров в интернет магазине генерируются и клонируются из одной которая прописана в файле 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> просто перейдите по ссылке данной мною выше, и наведите на товар, нужно что-бы активизировалась только та кнопка купить что относится к этому товару. |
с помощью css, но только современные браузеры:
.picca:hover cart { margin-top: 25px; } можно и с помощью jquery |
Может так
<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> |
да теперь гораздо лучше, но мне нужно что-бы при наведении на .picca класс .cart опускался вниз (marginTop) и оставался так до тех пор пока курсор наведен на .picca
|
Наверно так...
<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> |
все классно заработало, огромное спасибо))
|
Часовой пояс GMT +3, время: 15:17. |