Foros del Web » Programando para Internet » Javascript »

Mostrar <div> al pasar el mouse sobre su contenedor

Estas en el tema de Mostrar <div> al pasar el mouse sobre su contenedor en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/02/2012, 23:28
 
Fecha de Ingreso: julio-2008
Ubicación: Córdoba, Argentina
Mensajes: 266
Antigüedad: 15 años, 9 meses
Puntos: 26
Mostrar <div> al pasar el mouse sobre su contenedor

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.
  #2 (permalink)  
Antiguo 19/02/2012, 15:53
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 6 meses
Puntos: 14
Respuesta: Mostrar <div> al pasar el mouse sobre su contenedor

Hola,

Lo puedes hacer con css de varias maneras, por ejemplo

Código CSS:
Ver original
  1. #contenedor{ ....  }
  2.  
  3. .hijo{ display:none}
  4.  
  5. #contenedor:hover  .hijo {display:block   }/*cuando el cursor se situe sobre el elemento con id "contenedor" mostrara a el/los elementos hijos con clase "hijo"     */


ó


Código CSS:
Ver original
  1. .contenedores{ ....  }
  2.  
  3. .hijo{ display:none}
  4.  
  5. .contenedor:hover  .hijo {display:block   }/*cuando el cursor se situe sobre el elemento con clase "contenedores" mostrara a el/los elementos hijos con clase "hijo"     */


ó


Código CSS:
Ver original
  1. .hijo{ display:none}
  2.  
  3. div:hover >  .hijo {display:block   }/*cuando el cursor se situe sobre un div que tenga elementos hijos con clase "hijo" los mostrara     */
  #3 (permalink)  
Antiguo 19/02/2012, 19:43
 
Fecha de Ingreso: julio-2008
Ubicación: Córdoba, Argentina
Mensajes: 266
Antigüedad: 15 años, 9 meses
Puntos: 26
Respuesta: Mostrar <div> al pasar el mouse sobre su contenedor

¡Gracias! La verdad no sabía que podía hacerlo con CSS de esa forma. Muchas gracias por tu ayuda, es lo que buscaba.

Etiquetas: contenedor, js, mouse, php, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:49.