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