Column Hover to reveal button.

Test setup to get a button inside a table column to show while hovering the column and only when column is hovered.

HTML

<!-- comparison table -->
                    <article class="shadow">
                        
                        <table cellspacing="0" class="comparison">
                            <colgroup></colgroup>
                            <colgroup class="product col-a"></colgroup>
                            <colgroup class="product col-b"></colgroup>
                            <colgroup class="product col-a"></colgroup>
                            <thead>
                                <tr class="rounded">
                                    <td colspan="4">
                                        <div class="orange top"></div>
                                    </td>
                                </tr>
                                <tr class="header">
                                    <th class="title">
                                        <h1>Web<br /> Hosting</h1>
                                    </th>
                                    <th class="col-1"><a href="#"><h2>Product</h2></a></th>
                                    <th class="col-2"><a href="#"><h2>Product</h2></a></th>
                                    <th class="col-3"><a href="#"><h2>Product</h2></a></th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr class="rounded bottom">
                                    <td class="title">
                                        <div class="bottom-left"></div>
                                    </td>
                                    <td class="col-1">
                                        <div class="bottom"><span></span></div>
                                    </td>
                                    <td class="col-2">
                                        <div class="bottom"><span></span></div>
                                    </td>
                                    <td class="col-3">
                                  ...

CSS

/* -----------------------------------------------------
    Comparison Table
----------------------------------------------------- */
table {
  margin: 1px 0;
  width: 100%;
  /* js rollover highlights */ }
  table tr.header {
    background-color: #f7844e;
    padding-top: 40px; }
    table tr.header th {
      vertical-align: bottom; }
  table tr.row-a {
    height: 40px;
    background-color: #7fe2e7; }
  table tr.row-b {
    height: 40px;
    background-color: #7bdadf;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
  table tr.active {
    background-color: #baf1f4; }
  table .rounded {
    background: transparent; }
    table .rounded td {
      padding: 0;
      background: none; }
    table .rounded div.top {
      -moz-border-radius: 8px 8px 0 0;
      -webkit-border-radius: 8px 8px 0 0;
      border-radius: 8px 8px 0 0;
      -webkit-background-clip: padding-box;
      /* fix webkit rounded corners from showing 2 shaded pixels */
      height: 40px; }
      table .rounded div.top.orange {
        background-color: #f7844e; }
    table .rounded .bottom-left {
      -moz-border-radius: 0 0 0 8px;
      -webkit-border-radius: 0 0 0 8px;
      border-radius: 0 0 0 8px;
      -webkit-background-clip: padding-box;
      /* fix webkit rounded corners from showing 2 shaded pixels */
      background-color: #7fe2e7;
      height: 8px; }
    table .rounded .bottom {
      height: 8px;
      background-color: #7fe2e7; }
      table .rounded .bottom span {
        background-color: rgba(255, 255, 255, 0.3);
        display: block;
        height: 8px; }
    table .rounded .hover .bottom span {
      background-color: rgba(255, 255, 255, 0.7); }
    table .rounded .bottom-right {
      height: 8px;
      -moz-border-radius: 0 0 8px 0;
      -webkit-border-radius: 0 0 8px 0;
      border-radius: 0 0 8px 0;
      -webkit-background-clip: padding-box;
      /* fix webkit rounded corners from showing 2 shaded pixels */
      background-color: #7fe2e7; }
     ...

JavaScript

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

$('td').hover(function() {
    var idx = $(this).index();

    if ( table.data('col') == "" || table.data('col') == idx ) { // if on hover the data-col is blank or is the same as the current index
        table.data('col', idx ); // set data-col to current column
        $('.add-buttons').find('.col-'+idx+' a').slideDown('fast');
    }

}, function() {
    var idx = $(this).index();

    if ( table.data('col') != idx ) { // if data-col is not the same as the current index
        $('.add-buttons').find('.col-'+idx+' a').slideUp('fast'); // then hide the shown button
    }
    table.data('col', idx ); // then set the current column to the data-col attribute

});
*/

dojo.NodeList.prototype.hover = function(over, out){
    return this.onmouseenter(over).onmouseleave(out || over);
}
    
    dojo.query("table.comparison").hover(function(e){this.style.backgroundColor= 'red'}, function(e){this.style.backgroundColor= 'black'});