JQUERY - Show hidden div on TABLE mouse over -
JQUERY - Show hidden div on TABLE mouse over -
sorry little knowledge on jquery. have been seek , searching sort problem day or , have searched site answers, cant finalized solution.
basically working limited ecom site, provides limited development functionality, way manipulate , alter elements utilize client side language.
basically have very dirty html table generated on fly, table class , unique tr id each product. products show in own table.
i wanting show hidden div when user mouse-overs table. have tried following:
$(document).ready(function () { $('table.newspaper-d tr[id^=product_]').hover(function () { $(this).find("div.tools").show(); }, function () { $(this).find("div.tools").hide(); }); });
which works extent, works when hovering on div.
mark of html illustration tables class , each tr has unique row of product_ - (id contactenated) ie product_134 one, product_324, product_323 etc etc
<tbody> <tr><td></td></tr> <tr> <td align="center"> <table class="newspaper-d" border="0" style="width:250px; float:left;"> <tbody> <tr class="product_13633"> <td> kkkk <div class="tools" style="display: none;"> <div class="add-to-basket-product"> <div class="inner-add-to-basket-product"> <a href="javascript:addtocart(13633);"> add together cart </a> </div> </div> </div> </td> </tr> <tr> <td align="center"> <table cellspacing="3" cellpadding="3"> <tbody> <tr> <td width="200"> <div class="product-category-pic" align="center"> <a href="/descombes-brouilly-vv-2011-818221/"> <img class="image-thumb" border="0" src="/product_images/16/3883/thumb-descombes-brouilly-vv-2011.jpg" title="descombes brouilly vv 2011" alt="descombes brouilly vv 2011"></img> </a> </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center"> <table cellspacing="0" border="0"> <tbody> <tr> <td height="36" align="center"> product product product </td> </tr> </tbody> </table> <div class="product-category-details"></div> <div class="add-to-basket-product"></div> </td> </tr> </tbody> </table>
thanks guys
if understood lastly comment this:
$(document).ready(function () { $('table.newspaper-d').hover(function () { $(this).find("div.tools").show(); }, function () { $(this).find("div.tools").hide(); }); });
hovering total table, toggle visibility of div.
you can check united nations fiddle: http://jsfiddle.net/benjashu/klko76sa/
jquery
Comments
Post a Comment