Problemas con una función HOVER

designermaster · #1 (**permalink**) 24/07/2013, 12:29

Hola amigos.

Tengo un problema con el siguiente código.

Vereis, la página tiene varios div, con diferentes fotos. Mi intención es que cuando el usuario pase el ratón por una foto, aparezca el título de la foto (div que estaría como oculto). He encontrado la siguiente función en internet, el problema es que lo aplica a todos los divs, y a mi me gustaría que solo fuese al de la foto. Cómo puedo solucionarlo? .

<script type="text/javascript">
$(document).ready(function(){
$("ul a li .song").hover(function() {
$("ul a li .photo .info").fadeIn('slow');
},
function() {
$("ul a li .photo .info").fadeOut('slow');
});
});
</script>

Un saludo y muchas gracias

neglivv · #2 (**permalink**) 24/07/2013, 15:19

Como esta estructurado tu HTML? puedes colocar el código?

designermaster · #3 (**permalink**) 25/07/2013, 11:16

Hola! Gracias por tu respuesta. Te pego el código:

<ul>

<a title="" href=""><li>
<div class="song">
<div class="info">
<h1><?php the_title(); ?></h1>
<h2>Published on <?php echo date('F j, Y'); ?></h2>
</div>
<div class="imagen"><img src="" /></div>
</div>
</li></a>

<a title="" href=""><li>
<div class="song">
<div class="info">
<h1><?php the_title(); ?></h1>
<h2>Published on <?php echo date('F j, Y'); ?></h2>
</div>
<div class="imagen"><img src="" /></div>
</div>
</li></a>

<a title="" href=""><li>
<div class="song">
<div class="info">
<h1><?php the_title(); ?></h1>
<h2>Published on <?php echo date('F j, Y'); ?></h2>
</div>
<div class="imagen"><img src="" /></div>
</div>
</li></a>

</ul>

mixzplit · #4 (**permalink**) 26/07/2013, 09:45

Hola designermaster, intenta colocandole un ID al DIV donde carga la imagen y con jquery haces el proceso del HOVER haciendo referencia a ese DIV

Prueba y me comentas

designermaster · #5 (**permalink**) 26/07/2013, 15:48

pero lo tendría que poner un id diferente a cada código, y luego triplicar el script para cada uno? O cómo dices que se haría?? Gracias por tu respuesta ;)

mixzplit · #6 (**permalink**) 27/07/2013, 06:26

La tabla y las imagenes se muestran dinamicamente o es estatico?

Si la tabla se genera dinamicamente de una Base de Datos, lo que debes hacer es meter el codigo javascript que tienes en una funcion y en tu codigo HTML hacer el llamado:

Código Javascript:

Ver originalfunction prueba(id){
     $("ul a li .song").hover(function() {
         $("ul a li .photo .info"+id).fadeIn('slow');
     },
     function() {
        $("ul a li .photo .info"+id).fadeOut('slow');
     });
 
}

Código HTML:

Ver original<div class="imagen<?=$id_imagen>?" onmouseover="prueba("<?=$id_imagen?>")"><img src="" /></div>

Código PHP:

Ver original$id_imagen

es la variable que identifica la imagen, esto lo hago para que el ID que le coloques al DIV de la imagen no sea siempre el mismo
Este es el caso de que la tabla se te cargue dimamicamente

Si todo se carga Estaticamente, debes hacerlo como tu dijiste, crear varios ID y varias funciones Javascript

neglivv · #7 (**permalink**) 15/08/2013, 20:55

Hola designermaster, encontraste la respuesta a tu problema? Yo contesto algo tarde

(que mala costumbre la mía) ... diseñé una solución y aquí la coloco por si a alguien le parece útil:

Código HTML:

...
<html>
<head>
<script src="jquery-1.7.2.min.js"></script> <!--se puede usar una version mas actualizada-->
<script type="text/javascript">
	$(document).ready(function(){
		$("ul li .imagen").hover(function() {
		idImg = $(this).attr("id");
		$("ul li .info."+idImg).show('slow');
		},
		function() {
		idImg = $(this).attr("id");
		$("ul li .info."+idImg).hide('slow');
		});
	});
</script>

<style>
	.info {display:none;}
	img:hover{cursor:pointer;}
	ul {list-style:none;}
	
</style>
</head>

<body>
<ul>
	<li>
	<div class="imagen" id="1" ><a><img src="blusas-de-primavera-verano-4.jpg" /></a></div>
	<div class="info 1">
		<h1><?php the_title(); ?></h1>
		<h2>Published on <?php echo date('F j, Y'); ?></h2>
	</div> 
	</li>
	
	<li>
	<div class="imagen" id="2"><img src="blusas-de-primavera-verano-4.jpg" /></div>
	<div class="info 2">
	<h1><?php the_title(); ?></h1>
	<h2>Published on <?php echo date('F j, Y'); ?></h2>
	</div> 
	</li>

	<li>
	<div class="imagen" id="3"><img src="blusas-de-primavera-verano-4.jpg" /></div>
	<div class="info 3">
	<h1><?php the_title(); ?></h1>
	<h2>Published on <?php echo date('F j, Y'); ?></h2>
	</div> 
	</li>
</ul>
</body>
</html>

Lo que hay que tomar en cuenta es: Colocar un id a cada div class="imagen" que corresponda con la 2da clase del div class="info". En este caso si el div class="imagen" tiene como id="1", entonces le coloco a div class="info 1"

Bueno... es una solución algo sencilla y se puede mejorar.