Cómo hacer el siguiente código más dinámico?

[Carxl]

Qué tal?

Resulta que tengo el siguiente código:

Código HTML:

<table border="1">
<tr>
<td>
<img id="imghhh1" src="images/2.jpg" />
<div id="hhh1" style="display:none;">08:00 - 8:30</div>
</td>
</tr>
</table>
 

Código Javascript:

$('#imghhh1').hover(
                    function(){
                        var cssObj = {
                          'display' : 'block',
                          'background-color':'white',
                          'position' : 'absolute',
                          'z-index' : '100000'
                        }
 
                        $('#hhh1').css(cssObj);
                    }, function () {
                        $('#hhh1').css({display:'none'});
                    }
                );
 

Y funciona bien (para sólo un td), ahora quisiera poder crear n cantidad de td, con la misma estructura de hhh1 y que oculte/muestre su div interno respectivamente.

Lo que no sé, es como indicarle precisamente eso, que cuando haga un hover en cualquier img, se muestre el div, respectivo que la acompaña :S.

Espero me haya explicado.

Gracias de antemano

[masterpuppet]

Que tal Carxl,

Si la estructura html siempre es igual puedes utilizar:

Código Javascript:

$(this).next().css(cssObj);
 

Saludos.

[tredio]

como dice masterpuppet si la estructura del html no cambia lo puedes poner asi:

Código Javascript:

$('table img').hover(
                    function(){
                        var cssObj = {
                          'display' : 'block',
                          'background-color':'white',
                          'position' : 'absolute',
                          'z-index' : '100000'
                        }
 
                        $(this).next().css(cssObj);
                    }, function () {
                        $(this).next().css({display:'none'});
                    }
                );
 

si la estructura no es necesariamente como la pones alli, pero el div esta en el mismo contenedor que la img o algun contenedor hijo:

Código Javascript:

$('table img').hover(
                    function(){
                        var cssObj = {
                          'display' : 'block',
                          'background-color':'white',
                          'position' : 'absolute',
                          'z-index' : '100000'
                        }
 
                        $('div', $(this).parent()).css(cssObj);
                    }, function () {
                        $('div', $(this).parent()).css({display:'none'});
                    }
                );
 

[Carxl]

Qué tal masterpuppet? Gracias por tu respuesta

No me expliqué bien...

La idea es poder hacer:

Código HTML:

<td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00 - 8:30</div></td>
                            <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00</div></td>
                            <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00</div></td>
                            <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00</div></td>
                            <td><img class="imghhh1" src="<?php echo site_url('images/2.jpg');?>" /><div style="display:none;">08:00</div></td>
 

Si te fijas, ya no iría los id's en img, si no clases, por lo tanto el código jquery que hice para 1 id, queda inservible si quiero aplicarlo a varios td. Y eso es lo que no sé como hacerlo, como aplicar el mismo código que tengo, entendiento que debe mostrar/ocultar el div respectivo a la imagen que le hagan hover.

Gracias de nuevo.

[Carxl]

Disculpas, no había visto el código de Tredio antes de postear y funcionó a la perfección

Muchas gracias!

[masterpuppet]

Es lo mismo lo que cambia es el selector de id a clase y el estilo a aplicar a los elementos lo deberias definir fuera del hover, sino estas creando una variable local en cada mousenter, algo asi:

Código Javascript:

var styles = {
    'display' : 'block',
    'background-color':'white',
    'position' : 'absolute',
    'z-index' : '100000'
}
 
$('.imghhh1').hover(
    function() {
        $(this).next().css(styles);
     },
     function() {
        $(this).next().css({display:'none'});
    }
);
 

[Aijoona]

Adhiero a esto ultimo, agregando que el estilo no debería ser una variable global.