Hola, tengo un html en donde utilizo jquery, son 2 filas de imagenes. La superior estan todas ocultas y en el over de la inferior se muestra la superior correspondiente a su columna, esto lo quiero hacer por jquery. El problema que tengo es que si a la imagen superior le pongo en el html
Código HTML:
style="visibility:hidden"
no me funciona el css.
Fila superior
Código HTML:
<tr>
<td>
<ul class="hover_block">
<li id="clientes" ><a><img src="./images/im-clientes.jpg" class="img_cursor" />
</a></li>
</ul>
</td>
</tr>
Fila inferior
Código HTML:
<tr>
<td>
<img src="./images/h-clientes-e.jpg" />
</td></tr>
Código CSS
Código:
ul.hover_block li{
list-style:none;
float:left;
padding: 0px;
width:20px;
position: relative;
}
ul.hover_block li a {
display: inline;
position: relative;
overflow: visible;
height: 61px;
width: 268px;
padding: 16px;
color: #000;
}
ul.hover_block li a {
text-decoration: none;
}
ul.hover_block li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
y este es el código de jquery
Código:
$(function() {
$('ul.hover_block').hover(function(){
$(this).find('img').animate({top:'182px'},{queue:f alse,duration:500});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:fal se,duration:500});
});
});
El efecto no me funciona porque al estra oculta la imagen superior no anda el javascript, alguien sabe como solucionarlo
