Question

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

我的标记是一个非常基本的表格，按钮定位也没有造成任何麻烦，但我无法弄清楚如何将事件处理程序附加到表列的'hover'事件那将显示该列中的按钮，然后当悬停在不同的列时，隐藏当前显示并显示当前正在悬停的下一个。

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

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

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

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

2 个答案: