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

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

Это то, что они появляются, как, когда не скрыты:

Хороший пример готового продукта Grooveshark в наведении управления:

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

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

источник

2012-04-15 MCG

'visible()' не является функцией jquery ... Oh и 'live()' устарели, вместо этого используйте 'on()'. – elclanrs

Когда у вас есть таблицы строк (ДУХ), вы можете использовать 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>

источник

2012-04-15 02:34:06

Спасибо, немного поменял, но работал именно так, как нужно! Для любого заинтересованного, конечного кода был: http://pastebin.com/H8x8r0vW – MCG

Nice anims. :) Обратите внимание, что ': hover' не будет работать в IE6. В IE7 он будет работать, но вам нужно поставить doctype (см. Http://stackoverflow.com/questions/143296/problem-with-hover-in-ie7). –

Попробуйте использовать тег 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>

источник

2012-08-16 20:34:27

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

ответ

Смежные вопросы