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

Question

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/

I would appreciate it if you could help me out.

Answer 1

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