Evento mouseover

[CrazyLOL 2]

Tenho uma tabela e to querendo que quando o cara passar o mouse em cima de uma linha apareça algumas opções para ele.

Até ai está ok, consegui fazer o evento em jquery funcionar.

O problema é que só está funcionando na primeira linha...

 

O que preciso fazer para que todas as linhas funcione...

 

Para entender melhor o que fiz ate agora vou postar o meu codigo html abaixo:

<script>
$(document).ready(function(e){
   document.getElementById("teste").onmouseover = function(){
      document.getElementById("mostrarOptions").style.display = 'block';
   }
   document.getElementById("teste").onmouseout = function(){
      document.getElementById("mostrarOptions").style.display = 'none';
   }
});

</script>
<div class="form-body"> 
<div class="row">
<div class="col-md-4">
 <label> </label><br><br>
       Tudo (3) | Publicados (3) | Não Publicado (3)
   </div>
   <div class="col-md-4">
       <label class="control-label">Produto</label>
       <input type="text" id="lastName" class="form-control">
   </div>
   <div class="col-md-4">
    <label> </label><br>
   <button type="submit" class="btn blue"><i class="icon-search"></i> Procurar produto</button>
   </div>
 </div>
</div>
<div class="divider"></div>
<!-- BEGIN EXAMPLE TABLE PORTLET-->
               <div class="portlet box">
                 
                  <div class="portlet-body">
                     <table class="table table-striped table-hover">
                        <thead>
                           <tr>
                              <th width="5" class="hidden-xs center "><input type="checkbox" class="group-checkable"></th>
                              <th width="79" class="hidden-xs">        <span class="icon-eye-open"></span></th>
                              <th width="230" class="hidden-xs">Nome</th>
                              <th class="hidden-xs">REF</th>
                              <th class="hidden-xs">Estoque</th>
                              <th class="hidden-xs">Preço</th>
                              <th class="hidden-xs">Categorias</th>
                              <th class="hidden-xs">Etiquetas</th>
                              <th class="hidden-xs">Data</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr id="teste">
                              <td><input type="checkbox" class="group-checkable"></td>
                              <td><img width="79" height="79" src="811442NL-79x79.jpg" class="attachment-shop_thumbnail wp-post-image" alt="811442NL"></td>
                              <td>Camiseta Urgh Brain 224024A – Masculina
                              <div id="mostrarOptions" style="display:none;">ID: 29 | Editar | Edição rápida | Lixeira | Visualizar | Duplicado</div>
                              </td>
                              <td>4</td>
                              <td>X</td>
                               <td>X</td>
                                <td>X</td>
                                 <td>X</td>
                                  <td>X</td>
                           </tr>
                            <tr id="teste">
                              <td><input type="checkbox" class="group-checkable"></td>
                              <td><img width="79" height="79" src="811442NL-79x79.jpg" class="attachment-shop_thumbnail wp-post-image" alt="811442NL"></td>
                              <td>Camiseta Urgh Brain 224024A – Masculina
                              <div id="mostrarOptions" style="display:none;">ID: 29 | Editar | Edição rápida | Lixeira | Visualizar | Duplicado</div>
                              </td>
                              <td>4</td>
                              <td>X</td>
                               <td>X</td>
                                <td>X</td>
                                 <td>X</td>
                                  <td>X</td>
                           </tr>
                            
                        </tbody>
                        <thead>
                           <tr>
                              <th width="5" class="left"><input type="checkbox" class="group-checkable"></th>
                              <th width="36" class="hidden-xs">        <span class="icon-eye-open"></span></th>
                              <th class="hidden-xs">Nome</th>
                              <th class="hidden-xs">REF</th>
                              <th class="hidden-xs">Estoque</th>
                              <th class="hidden-xs">Preço</th>
                              <th class="hidden-xs">Categorias</th>
                              <th class="hidden-xs">Etiquetas</th>
                              <th class="hidden-xs">Data</th>
                           </tr>
                        </thead>
                     </table>
                  </div>
               </div>
               <!-- END EXAMPLE TABLE PORTLET-->

[dnielrodrigues 1]

Cara, não analisei teu código, mas cê já tentou fazer só com CSS. Talvez nem precise de js.

 

Exemplo:

 

.elemento-pai{}

.elemento-filho{display:none;}

.elemento-pai:hover .celula-filho{display:block}

 

Esse exemplo não vai funfar no ieCA mas é um inicio pra começar a pensar a respeito.

 

Espero ter ajudado,

[CrazyLOL 2]

Como ficaria o exemplo que voce citou em meu codigo?