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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -