JQuery: how can I hide/show a small column specific button on table column hover?

If you want to do this I would suggest using floating, width-defined divs. The way you're doing it now it's unnecessarily complicated to isolate hovering over a "column". If they were divs you could simply say $("div. Column").

Hover(..) to get the effect you're going for div class="container"> Webmail ... ... Add It ... Add It ... Add It ... Addit { display:block; } or product:hover . Addit { background: blue; } or jQuery $(". Product").

Hover( function() { $(this). Find(". Addit").slideDown(); }, function() { $(this).

Find(". Addit").slideUp(); } ).

If you want to do this I would suggest using floating, width-defined divs. The way you're doing it now it's unnecessarily complicated to isolate hovering over a "column". If they were divs you could simply say $("div. Column").

Hover(..) to get the effect you're going for. Webmail ... ... Add It ... Add It ... Add It ... Then some simple CSS . Product .

Addit { display:none; } . Product:hover . Addit { display:block; } or .

Product:hover . Addit { background: blue; } or jQuery $(". Product").

Hover( function() { $(this). Find(". Addit").slideDown(); }, function() { $(this).

Find(". Addit").slideUp(); } ).

You could probably achieve this much more easily with divs – hunter Nov 8 '10 at 19:39 1 also, it might not be a good idea from a usability perspective to hide the ADD TO CART button entirely. If they never moused-over any product they might think you CAN'T add to cart! – hunter Nov 8 '10 at 19:40 thanks for the feedback, I was contemplating using floated div's with a nested ul instead of a table but semantically it's a data table so shouldn't it be in a table element?

– Jannis Nov 9 '10 at 19:42 Also: Good call about the usability aspect. Will have to revise this I think. – Jannis Nov 9 '10 at 19:43 It could be a table but everything you'll try to do will be more complex as far as jQuery.

R0m4n's answer will work but you can achieve the same thing with far less code with floating divs. Rather than slideUp/Down the "Add To Cart" element why not highlight it (background-color, opacity, etc) on hover of the div? You could do this all with CSS. – hunter Nov 10 '10 at 13:30.

If you don't want to use divs, try this js instead: var table = $('table. Comparison'), addBtns = table. Find('.

Add-buttons a'); // the is the button to be shown/hidden table. Data('col',''); // attribute to keep track of currently hovered column var compare = "x"; $('td'). Hover(function() { var idx = $(this).index(); var idx2 = "col-"+ idx; table.

Data('col', idx ); // set data-col to current column if($(this). Attr("class")! = compare){ $('.

Add-buttons'). Find('a'). SlideUp('fast'); $('.

Add-buttons'). Find('. Col-'+idx+' a').

SlideDown('fast'); compare = idx2; } }); $('table'). Hover(function() {},function(){ $('. Add-buttons').

Find('a'). SlideUp('fast'); }).

And thanks for your code. I tried it out and while it works better than what I had it has one major issue where when you do not leave the current column but move up and down from cell to cell the button slideToggles every time you hover a new cell… – Jannis Nov 9 '10 at 19:44 hmmm... I couldn't replicate your issue but maybe a browser compatibility problem? What browser you test with?

– r0m4n Nov 9 '10 at 21:01 This was in Firefox 3.6.11 on Mac, I can reproduce it by basically going into a column than not leaving the column but going up and down within the same column, every time I hover a new td it would fire the animation. – Jannis Nov 14 '10 at 20:25.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.