jQuery：如何隐藏/显示表格列悬停上的小列特定按钮？

Question

我需要隐藏/显示（实际上是slideDown/slideUp）每个表格列下的“添加到购物车”按钮。

我的标记是一个非常基本的表，按钮定位也不会造成任何麻烦，但我不明白是如何将一个事件处理程序附加到表列的'悬停'事件将显示该列内的按钮然后悬停不同的列时，隐藏当前显示并显示当前正在悬停的下一个列。

我已经创建了一个完整的设置jsFiddle，希望能够正确说明这个问题。

http://jsfiddle.net/jannis/naz22/

我将不胜感激，如果你能帮助我。

Answer 1

如果你想这样做，我会建议使用浮动，宽度定义的div。你现在正在做的事情是，把一个“列”悬停在一起是不必要的复杂。如果他们是div，你可以简单地说$("div.column").hover(..)来获得你要去的效果。

<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> 

然后一些简单的CSS

.product .addit { display:none; } 
.product:hover .addit { display:block; } 

或

.product:hover .addit { background: blue; } 

或jQuery的

$(".product").hover(
    function() { $(this).find(".addit").slideDown(); }, 
    function() { $(this).find(".addit").slideUp(); } 
); 

Answer 2

，如果你不希望使用的div，尝试这个js来代替：

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