Hola a todos.
Tengo una tabla con un listado de avisos que saco de una base de datos MySQL con PHP, y me gustaría que al pasar el mouse sobre cada aviso se vean algunos botones de administración, como de editar o borrar. Dejo un pequeño ejemplo:
Código HTML:
<table class="avisos">
<tr>
<td>
<div class="aviso">
<div class="administrar_aviso">
<a href="index.php?sec=borrar&id=1"><img src="imagenes/borrar.png" alt="Borrar" /></a>
<a href="index.php?sec=editar&id=1"><img src="imagenes/editar.png" alt="Editar" /></a>
</div>
Texto...
</div>
</td>
<td>
<div class="aviso">
<div class="administrar_aviso">
<a href="index.php?sec=borrar&id=2"><img src="imagenes/borrar.png" alt="Borrar" /></a>
<a href="index.php?sec=editar&id=2"><img src="imagenes/editar.png" alt="Editar" /></a>
</div>
Texto...
</div>
</td>
<td>
<div class="aviso">
<div class="administrar_aviso">
<a href="index.php?sec=borrar&id=3"><img src="imagenes/borrar.png" alt="Borrar" /></a>
<a href="index.php?sec=editar&id=3"><img src="imagenes/editar.png" alt="Editar" /></a>
</div>
Texto...
</div>
</td>
</tr>
</table>
Lo que quiero es agregar una función (supongo que requiero de JS sí o sí) que muestre (elemento.style.visibility = 'visible') el <div> con class="administrar_aviso" cuando paso el mouse sobre el <div> que lo contiene, es decir el que tiene class="aviso". Es como en las publicaciones de Facebook, que muestra una pequeña imagen de administración al pasar el mouse sobre una publicación.
El problema es que si selecciono el elemento por el nombre de su clase, se aplicaría todos los avisos al mismo tiempo. No me convence usar un ID distinto para cada <div> (<div id="administrar_aviso1">, <div id="administrar_aviso2">, etc.) y seleccionarlos por su ID.
Lo único que se me ocurre es empleando alguna forma que permita elegir un elemento hijo del elemento que llama al evento JS, pero dentor de ese <div> no sólo está el <div> que quiero mostrar al pasar el mouse, sino también links (<a>), una imagen (<img />) y <span>.
Un saludo.