Bouton afficher/Masquer dans la Ligne de la Table lors du passage de la souris

J'ai une table de lignes (duh) et dans une des colonnes, je vais essayer d'avoir deux boutons apparaissent durant le stationnaire/passage de la souris. Maintenant, c'est une balise d'ancrage avec un ensemble de largeur/hauteur et d'un fond de placement.

C'est ce qu'ils apparaissent comme lorsqu'il n'est pas caché:

Bouton afficher/Masquer dans la Ligne de la Table lors du passage de la souris

Un bon exemple de produit fini est grooveshark du survol du contrôle:

Bouton afficher/Masquer dans la Ligne de la Table lors du passage de la souris

Fondamentalement, je me demandais comment j'allais faire pour obtenir toutes les images pour être caché, à l'exception de ceux dans une ligne qui est actuellement en cours planait au-dessus. Alors que la ligne serait de montrer ces images, mais disparaissent une fois que la souris se déplace sur une ligne différente.

Code 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>';

Code JS:

jQuery('td').live('mouseover', function () {
    jQuery(this).closest("tr").find('a.rowOption').visible();
});
visible() n'est pas une fonction jquery...Oh, et live() est obsolète, utilisez on() à la place.

OriginalL'auteur MCG | 2012-04-15

  1. 20

    Lorsque vous avez des tables de lignes (duh), vous pouvez utiliser les CSS comme ceci:

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

    De travail pour ce balisage:

    <table id="mytableofrows" width="100%">
    <tr><td> <a class="button">Hello yes this is dog</a> </td></tr>
</table>
    Merci, changé un peu, mais il a travaillé comme! Pour toute personne intéressée, le code est: pastebin.com/H8x8r0vW
    Nice anims. 🙂 A noter que :hover ne fonctionne pas dans IE6. Dans IE7 cela va fonctionner, mais vous avez besoin de mettre un doctype (voir stackoverflow.com/questions/143296/problem-with-hover-in-ie7).

    OriginalL'auteur Silviu-Marian

  2. 5

    Essayez d'utiliser HTML5 balise style. 

    <!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>

    OriginalL'auteur Flavio Wuensche