Estoy intentando que se muestren los botones para gestionar una fila de una datatable cuando el cursor pasa por la ultima columna de dicha tabla y logre conseguirlo haciendo una seleccion por id a dichos botones. Pero el problema es que como los id tienen que ser unicos y en cada iteracion el carga nuevos botones, solo se mostraban los de la primera fila. Necesito que se muestren en cada fila que se carga de la base de datos por lo que intente hacer un selestor por class pero asi no funciona ni siquiera para la primera fila. Este es mi codigo:
{% extends 'default/Plantilla.html.twig' %}
{% block subtitle %}<h1>Trazas</h1>{% endblock %}
{% block body %}
<br/>
<table class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th>Usuario</th>
<th>URL Accedida</th>
<th>Fecha y Hora</th>
<th>Ip</th>
<th>Tiempo de Navegacion</th>
<th>Descargas</th>
<th>Cantidad de Sesiones</th>
<th>Traza</th>
<th>Gestionar</th>
</tr>
</thead>
<tbody>
{% for traza in trazas %}
<tr >
<td>{{ traza.usuario }}</td>
<td>{{ traza.URLAccedida }}</td>
<td>{{ traza.fechaHora }}</td>
<td>{{ traza.ip }}</td>
<td>{{ traza.tiempoNavegacion }}</td>
<td>{{ traza.descargas ? 'Si' : 'No' }}</td>
<td>{{ traza.cantSesiones }}</td>
<td>{{ traza.traza }}</td>
<td width="185px" onmouseover="mostrarBoton()" onmouseout="ocultarBoton()" >
<a class="btn btn-success buttonShow" href="{{ path('trazas_show', {'id': traza.id}) }}" id="botonShow" style="display: none;"><i class="fa fa-eye" ></i></a>
<a class="btn btn-success buttonEdit" href="{{ path('trazas_edit', {'id': traza.id}) }}" id="botonEdit" style="display: none;"><i class="fa fa-edit" ></i></a>
{{ include('trazas/_delete_form.html.twig') }}
</td>
</tr>
{% else %}
<tr>
<td colspan="10">No existen datos registrados</td>
</tr>
{% endfor %}
</tbody>
</table>
<a class="btn btn-success" href="{{ path('trazas_new') }}" id="botonAñadir"><i class="fa fa-plus-circle" ></i> Añadir</a>
<script>
var btn_1 = document.getElementsByClassName('btn btn-success buttonEdit');
var btn_2 = document.getElementsByClassName('btn btn-success buttonEdit');
var btn_3 = document.getElementsByClassName('btn btn-success buttonDel');
function mostrarBoton () {
btn_1.style.display = 'inline';
btn_2.style.display = 'inline';
btn_3.style.display = 'inline';
}
function ocultarBoton () {
btn_1.style.display = 'none';
btn_2.style.display = 'none';
btn_3.style.display = 'none';
}
</script>
{% endblock %}
si alguien pudiese darme una solución se lo agradeceria.