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.