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

I need to hide/show (actually slideDown/slideUp) an 'add to cart' button underneath each table column.

My markup is a pretty basic table and the buttons positioning isn't causing any trouble either but what I cannot figure out is how to attach an event handler to the 'hover' event of a table column that will show the button inside that column then when hovering a different column, hide the currently showing and reveal the next one currently being hovered.

I've created a jsFiddle with a complete setup hopefully illustrating this issue properly.

http://jsfiddle.net/jannis/naz22/开发者_JAVA技巧

I would appreciate it if you could help me out.

---

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">
    <div class="features">
         <ul>
             <li>Webmail</li>
             ...
         </ul>
    </div>
    <div class="product">
         <ul>
             <li><img src="" /></li>
             ...
             <li class="addit"><a href="#">Add It</a></li>
          </ul>
    </div>
    <div class="product">
         <ul>
             <li><img src="" /></li>
             ...
             <li class="addit"><a href="#">Add It</a></li>
          </ul>
    </div>
    <div class="product">
         <ul>
             <li><img src="" /></li>
             ...
             <li class="addit"><a href="#">Add It</a></li>
          </ul>
          ...
    </div>
</div>

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(); }
);

---

if you don't want to use divs, try this js instead:

var table = $('table.comparison'),

addBtns = table.find('.add-buttons a'); // the <a> 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');   
});