Показать/скрыть кнопку в строке таблицы при наведении курсора мыши

У меня есть таблица строк (дух), и в одном из столбцов я пытаюсь, чтобы во время наведения/наведения мыши появлялись две кнопки. Прямо сейчас это тег привязки с заданной шириной/высотой и расположением фона.

Вот как они выглядят, когда не скрыты:

Хорошим примером готового продукта являются элементы управления наведением Grooshark:

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

HTML-код:

echo '<td><a href="/servers/detail.php?id='. $row['id'] .'">'.$row['server_name'].'</a><a id="option-favorite" class="rowOption"></a><a id="option-vote" class="rowOption"></a></td>';

JS-код:

jQuery('td').live('mouseover', function () {
    jQuery(this).closest("tr").find('a.rowOption').visible();
});

jquery html-table mouseover jquery-hover
person MCG    schedule 15.04.2012    source источник
comment
visible() не является функцией jquery... О, и live() устарела, вместо этого используйте on().   -  person elclanrs    schedule 15.04.2012

Ответы (2)


arrow_upward
23
arrow_downward

Когда у вас есть таблицы строк (дух), вы можете использовать CSS следующим образом:

  table#mytableofrows tr td a.button { display:none;}
  table#mytableofrows tr:hover td a.button { display:inline-block;}

Будет работать для этой разметки:

<table id="mytableofrows" width="100%">
    <tr><td> <a class="button">Hello yes this is dog</a> </td></tr>
</table>
person Silviu-Marian    schedule 15.04.2012
comment
Спасибо, немного изменил, но работал именно так, как нужно! Для всех, кто заинтересован, окончательный код: pastebin.com/H8x8r0vW - person MCG; 15.04.2012
comment
Хорошие анимки. :) Обратите внимание, что :hover не будет работать в IE6. В IE7 это будет работать, но вам нужно указать тип документа (см. stackoverflow.com/questions/143296/problem-with-hover-in-ie7). - person Silviu-Marian; 15.04.2012

arrow_upward
7
arrow_downward

Попробуйте использовать тег стиля HTML5.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      table tr button { opacity:0; float:right }
      table tr:hover button { opacity:1 }
    </style>
  </head>

  <body>
    <table border=1 width=300px>
      <tr><td>LINE1 <button>BUTTON1</button></td></tr>
      <tr><td>LINE2 <button>BUTTON2</button></td></tr>
      <tr><td>LINE3 <button>BUTTON3</button></td></tr>
    </table>
  </body>
</html>
person Flavio Wuensche    schedule 16.08.2012