JQuery показывать контент при наведении

Question

В основном есть таблица продуктов, что-то похожее на:

<table>
  <tr>
    <td>Product 1 <br> Brief info</td>
    <td>Product 2 <br> Brief info</td>
    <td>Product 3 <br> Brief info</td>
  </tr>
</table>

Когда пользователь наводит курсор на ячейку таблицы, я хотел бы немного затенить ячейку, а затем наложить на эту ячейку некоторый контент с призывом к действию на странице продукта.

Не слишком удачно, чтобы заставить это работать, поэтому любые указатели будут оценены.

Answer 1

см. ДЕМО

Answer 2

Используйте: .hover ()

$("table td").hover(
 function () {
     // mouse over
  }, 
  function () {
   // mouse out
  }
);